/* * NYSC Design System v3 — Token Layer * Atomic Design + Token-Based Theming | Premium Edition */ /* ── Light Mode ───────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Brand */ --clr-primary: #3d7a42; --clr-primary-dark: #2e5e32; --clr-primary-light: #5ca864; --clr-primary-xlight: #e8f5ea; --clr-primary-glow: rgba(61,122,66,0.25); --clr-accent: #c49a0a; --clr-accent-dark: #9a7808; --clr-accent-glow: rgba(196,154,10,0.25); --clr-warning: #e07b00; --clr-warning-glow: rgba(224,123,0,0.25); --clr-danger: #c0392b; --clr-danger-glow: rgba(192,57,43,0.25); --clr-success: #27ae60; --clr-info: #b8860b; /* ── NEW: Pattern & Decoration Tokens ── */ --clr-dot-pattern: rgba(61,122,66,0.055); --grad-text-hero: linear-gradient(135deg, #5ca864 0%, #1e4a22 80%); --grad-btn-animated: linear-gradient(135deg, #5ca864 0%, #2e6632 50%, #4c8551 100%); --clr-glass: rgba(255,255,255,0.72); --clr-glass-border: rgba(255,255,255,0.50); /* Gradients */ --grad-primary: linear-gradient(135deg, #4c8551 0%, #2e6632 100%); --grad-primary-hover: linear-gradient(135deg, #5ca864 0%, #3d7a42 100%); --grad-primary-vivid: linear-gradient(135deg, #62b868 0%, #2e6632 50%, #1a4d1e 100%); --grad-accent: linear-gradient(135deg, #c8a010 0%, #9a7808 100%); --grad-warning: linear-gradient(135deg, #f0950a 0%, #c87200 100%); --grad-danger: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%); --grad-surface: linear-gradient(180deg, #ffffff 0%, #f8faf8 100%); --grad-nav: linear-gradient(135deg, #4c8e52 0%, #357038 40%, #1e5224 100%); --grad-sidebar: linear-gradient(180deg, #f2f7f2 0%, #eaf2ea 100%); --grad-table-head: linear-gradient(135deg, #4c8e52 0%, #357038 50%, #2a5c2e 100%); --grad-page-hero: linear-gradient(135deg, #5ca864 0%, #2e6632 45%, #1a3c1e 100%); /* Surfaces */ --clr-bg: #f0f4f1; --clr-bg-alt: #ffffff; --clr-bg-muted: #e8eee8; --clr-surface: #ffffff; --clr-surface-alt: #f4f8f4; --clr-surface-raised: #ffffff; --clr-overlay: rgba(0,0,0,0.50); /* Text */ --clr-text: #1a2e1a; --clr-text-muted: #52725a; --clr-text-faint: #8ca88c; --clr-text-inverse: #ffffff; --clr-text-link: #3d7a42; /* Borders */ --clr-border: #ccdacc; --clr-border-strong: #a8bca8; --clr-border-focus: #4c8551; /* Navigation */ --clr-nav-bg: #3d7a42; --clr-nav-text: rgba(255,255,255,0.92); --clr-nav-hover: rgba(255,255,255,0.15); --clr-nav-active-bar: #ffffff; /* Sidebar */ --clr-sidebar-bg: #f8faf8; --clr-sidebar-text: #1a2e1c; --clr-sidebar-hover-bg: rgba(61,122,66,0.12); --clr-sidebar-active: #3d7a42; --clr-sidebar-active-text: #ffffff; --clr-sidebar-divider: #d0ddd0; --clr-sidebar-icon: #3d7a42; /* Breadcrumb */ --clr-breadcrumb-bg: #e4ede5; --clr-breadcrumb-text: #2e4a32; /* Footer */ --clr-footer-bg: #1a2c1c; --clr-footer-text: #b0c8b2; --clr-footer-link: #80b884; /* Inputs */ --clr-input-bg: #ffffff; --clr-input-border: #b8cbb8; --clr-input-focus: #3d7a42; --clr-input-text: #1a2e1a; --clr-input-placeholder:#8ca88c; --clr-input-bg-focus: #f8fdf8; /* Tables */ --clr-table-head: #3d7a42; --clr-table-head-text: #ffffff; --clr-table-stripe: #f2f7f2; --clr-table-hover: #e4ede5; --clr-table-border: #d0ddd0; /* Cards */ --clr-card-bg: #ffffff; --clr-card-border: #dce8dc; --clr-card-shadow: 0 2px 8px rgba(61,122,66,0.08), 0 1px 3px rgba(0,0,0,0.05); --clr-card-shadow-hover:0 8px 30px rgba(61,122,66,0.15), 0 4px 12px rgba(0,0,0,0.08); /* ── NEW: Premium Multi-Layer Shadows ── */ --shadow-card: 0 1px 3px rgba(0,0,0,0.06), 0 4px 12px rgba(61,122,66,0.08), 0 0 0 1px rgba(61,122,66,0.06); --shadow-card-hover: 0 4px 6px rgba(0,0,0,0.06), 0 16px 32px rgba(61,122,66,0.14), 0 0 0 1px rgba(61,122,66,0.10); --shadow-glow-lg: 0 0 30px rgba(61,122,66,0.25); --shadow-glow-xl: 0 0 50px rgba(61,122,66,0.30), 0 0 20px rgba(196,154,10,0.15); /* Badges */ --clr-badge-success-bg: #d4edda; --clr-badge-success-text: #155724; --clr-badge-warning-bg: #fff3cd; --clr-badge-warning-text: #7d5a00; --clr-badge-danger-bg: #f8d7da; --clr-badge-danger-text: #721c24; --clr-badge-info-bg: #fdf3d0; --clr-badge-info-text: #7a5c00; --clr-badge-default-bg: #e8eee8; --clr-badge-default-text: #52725a; /* Toggle */ --clr-toggle-bg: rgba(255,255,255,0.20); --clr-toggle-icon: #ffffff; /* Scrollbar */ --clr-scrollbar: #b0c8b2; --clr-scrollbar-track: #e8eee8; /* Shadows */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05); --shadow-sm: 0 2px 6px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05); --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06); --shadow-lg: 0 12px 40px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.08); --shadow-xl: 0 24px 64px rgba(0,0,0,0.18); --shadow-glow-primary: 0 0 0 3px var(--clr-primary-glow); --shadow-glow-accent: 0 0 0 3px var(--clr-accent-glow); --shadow-btn-primary: 0 4px 14px rgba(61,122,66,0.40); --shadow-btn-hover: 0 8px 24px rgba(61,122,66,0.55), 0 2px 8px rgba(0,0,0,0.12); /* Geometry */ --radius-xs: 3px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 9999px; /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; /* Typography */ --font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 15px; --font-size-lg: 18px; --font-size-xl: 22px; --font-size-2xl: 28px; --font-size-3xl: 36px; --line-height: 1.65; --font-weight-normal: 400; --font-weight-med: 500; --font-weight-semi: 600; --font-weight-bold: 700; /* Transitions */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --t-fast: 0.15s var(--ease-smooth); --t-base: 0.25s var(--ease-smooth); --t-slow: 0.4s var(--ease-smooth); --t-bounce: 0.5s var(--ease-bounce); /* Deprecated aliases (keep for compat) */ --transition-fast: var(--t-fast); --transition-base: var(--t-base); --transition-slow: var(--t-slow); --clr-primary-muted: var(--clr-primary-xlight); --clr-sidebar-hover: var(--clr-sidebar-hover-bg); --clr-sidebar-border: var(--clr-border); --clr-glass-border: rgba(255,255,255,0.50); } /* ── Dark Mode ────────────────────────────────────────────────────── */ [data-theme="dark"] { --clr-primary: #6ab870; --clr-primary-dark: #4c8e52; --clr-primary-light: #8cd494; --clr-primary-xlight: #1a2e1c; --clr-primary-glow: rgba(106,184,112,0.30); --clr-accent: #d4a83a; --clr-accent-dark: #a88020; --clr-accent-glow: rgba(212,168,58,0.30); --clr-warning: #f0a832; --clr-warning-glow: rgba(240,168,50,0.30); --clr-danger: #e05858; --clr-danger-glow: rgba(224,88,88,0.30); --clr-success: #52c97a; --clr-info: #d4a83a; /* ── NEW: Pattern & Decoration Tokens (dark) ── */ --clr-dot-pattern: rgba(106,184,112,0.03); --grad-text-hero: linear-gradient(135deg, #8cd494 0%, #4c8e52 80%); --grad-btn-animated: linear-gradient(135deg, #4c8e52 0%, #2a5030 50%, #3d6e42 100%); --clr-glass: rgba(20,32,20,0.72); --clr-glass-border: rgba(106,184,112,0.12); --grad-primary: linear-gradient(135deg, #3d6e42 0%, #2a5030 100%); --grad-primary-hover: linear-gradient(135deg, #4c8e52 0%, #3a6640 100%); --grad-primary-vivid: linear-gradient(135deg, #4c8e52 0%, #2a5030 50%, #182a1a 100%); --grad-accent: linear-gradient(135deg, #c8a010 0%, #9a7808 100%); --grad-warning: linear-gradient(135deg, #f0a832 0%, #c88000 100%); --grad-danger: linear-gradient(135deg, #e05858 0%, #b83030 100%); --grad-surface: linear-gradient(180deg, #1e2a1e 0%, #182018 100%); --grad-nav: linear-gradient(135deg, #1a2e1c 0%, #111f13 50%, #0c1810 100%); --grad-sidebar: linear-gradient(180deg, #182018 0%, #141c14 100%); --grad-table-head: linear-gradient(135deg, #1e2e1e 0%, #182818 50%, #121e12 100%); --grad-page-hero: linear-gradient(135deg, #3d6e42 0%, #1e3020 45%, #0e1a10 100%); --clr-bg: #141c14; --clr-bg-alt: #1a241a; --clr-bg-muted: #161e16; --clr-surface: #1e2a1e; --clr-surface-alt: #243024; --clr-surface-raised: #263226; --clr-overlay: rgba(0,0,0,0.75); --clr-text: #d4ead6; --clr-text-muted: #86a88a; --clr-text-faint: #4e6852; --clr-text-inverse: #1a2e1a; --clr-text-link: #6ab870; --clr-border: #263626; --clr-border-strong: #344834; --clr-border-focus: #6ab870; --clr-nav-bg: #101810; --clr-nav-text: rgba(212,234,214,0.92); --clr-nav-hover: rgba(106,184,112,0.15); --clr-nav-active-bar: #6ab870; --clr-sidebar-bg: #141c14; --clr-sidebar-text: #b0c8b2; --clr-sidebar-hover-bg: rgba(106,184,112,0.10); --clr-sidebar-active: #3d6e42; --clr-sidebar-active-text: #d4ead6; --clr-sidebar-divider: #263626; --clr-sidebar-icon: #6ab870; --clr-breadcrumb-bg: #1a241a; --clr-breadcrumb-text: #86a88a; --clr-footer-bg: #0c140c; --clr-footer-text: #6a8a6c; --clr-footer-link: #6ab870; --clr-input-bg: #1a241a; --clr-input-border: #304030; --clr-input-focus: #6ab870; --clr-input-text: #d4ead6; --clr-input-placeholder:#4e6852; --clr-input-bg-focus: #1e2a1e; --clr-table-head: #1e2e1e; --clr-table-head-text: #a0c8a4; --clr-table-stripe: #182018; --clr-table-hover: #1e2a1e; --clr-table-border: #263626; --clr-card-bg: #1e2a1e; --clr-card-border: #263626; --clr-card-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.25); --clr-card-shadow-hover:0 8px 30px rgba(0,0,0,0.50), 0 4px 12px rgba(0,0,0,0.30); /* ── NEW: Premium Multi-Layer Shadows (dark) ── */ --shadow-card: 0 1px 3px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.30), 0 0 0 1px rgba(106,184,112,0.06); --shadow-card-hover: 0 4px 6px rgba(0,0,0,0.30), 0 16px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(106,184,112,0.12); --shadow-glow-lg: 0 0 30px rgba(106,184,112,0.20); --shadow-glow-xl: 0 0 50px rgba(106,184,112,0.25), 0 0 20px rgba(212,168,58,0.12); --clr-badge-success-bg: #1a3820; --clr-badge-success-text: #6ab870; --clr-badge-warning-bg: #362a10; --clr-badge-warning-text: #f0a832; --clr-badge-danger-bg: #361a1a; --clr-badge-danger-text: #e05858; --clr-badge-info-bg: #2e2610; --clr-badge-info-text: #d4a83a; --clr-badge-default-bg: #263626; --clr-badge-default-text: #86a88a; --clr-toggle-bg: rgba(106,184,112,0.15); --clr-toggle-icon: #f0a832; --clr-scrollbar: #304030; --clr-scrollbar-track: #1a241a; --shadow-xs: 0 1px 2px rgba(0,0,0,0.20); --shadow-sm: 0 2px 6px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20); --shadow-md: 0 4px 16px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.25); --shadow-lg: 0 12px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35); --shadow-xl: 0 24px 64px rgba(0,0,0,0.65); --shadow-glow-primary: 0 0 0 3px var(--clr-primary-glow); --shadow-glow-accent: 0 0 0 3px var(--clr-accent-glow); --shadow-btn-primary: 0 4px 14px rgba(61,110,66,0.50); --shadow-btn-hover: 0 8px 24px rgba(61,110,66,0.65), 0 2px 8px rgba(0,0,0,0.25); /* aliases */ --clr-primary-muted: var(--clr-primary-xlight); --clr-sidebar-hover: var(--clr-sidebar-hover-bg); --clr-sidebar-border: var(--clr-border); } /* ── System preference fallback ──────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --clr-primary: #6ab870; --clr-primary-dark: #4c8e52; --clr-primary-light: #8cd494; --clr-primary-xlight: #1a2e1c; --clr-primary-glow: rgba(106,184,112,0.30); --clr-dot-pattern: rgba(106,184,112,0.03); --grad-text-hero: linear-gradient(135deg, #8cd494 0%, #4c8e52 80%); --grad-btn-animated: linear-gradient(135deg, #4c8e52 0%, #2a5030 50%, #3d6e42 100%); --clr-glass: rgba(20,32,20,0.72); --clr-glass-border: rgba(106,184,112,0.12); --grad-primary: linear-gradient(135deg, #3d6e42 0%, #2a5030 100%); --grad-nav: linear-gradient(135deg, #1a2e1c 0%, #111f13 50%, #0c1810 100%); --grad-table-head: linear-gradient(135deg, #1e2e1e 0%, #182818 50%, #121e12 100%); --clr-bg: #141c14; --clr-bg-alt: #1a241a; --clr-bg-muted: #161e16; --clr-surface: #1e2a1e; --clr-surface-alt: #243024; --clr-surface-raised: #263226; --clr-text: #d4ead6; --clr-text-muted: #86a88a; --clr-text-faint: #4e6852; --clr-border: #263626; --clr-border-strong: #344834; --clr-nav-bg: #101810; --clr-nav-text: rgba(212,234,214,0.92); --clr-sidebar-bg: #141c14; --clr-sidebar-text: #b0c8b2; --clr-sidebar-active: #3d6e42; --clr-sidebar-active-text: #d4ead6; --clr-sidebar-icon: #6ab870; --clr-card-bg: #1e2a1e; --clr-card-border: #263626; --clr-input-bg: #1a241a; --clr-input-border: #304030; --clr-input-focus: #6ab870; --clr-input-text: #d4ead6; --clr-table-head: #1e2e1e; --clr-table-head-text: #a0c8a4; --clr-table-stripe: #182018; --clr-table-hover: #1e2a1e; --clr-footer-bg: #0c140c; --clr-footer-text: #6a8a6c; --clr-breadcrumb-bg: #1a241a; --clr-breadcrumb-text: #86a88a; --clr-toggle-bg: rgba(106,184,112,0.15); --clr-toggle-icon: #f0a832; --shadow-card: 0 1px 3px rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.30), 0 0 0 1px rgba(106,184,112,0.06); --shadow-card-hover: 0 4px 6px rgba(0,0,0,0.30), 0 16px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(106,184,112,0.12); --shadow-glow-lg: 0 0 30px rgba(106,184,112,0.20); --shadow-glow-xl: 0 0 50px rgba(106,184,112,0.25), 0 0 20px rgba(212,168,58,0.12); --shadow-sm: 0 2px 6px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.20); --shadow-md: 0 4px 16px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.25); --shadow-lg: 0 12px 40px rgba(0,0,0,0.55), 0 4px 12px rgba(0,0,0,0.35); --shadow-btn-primary: 0 4px 14px rgba(61,110,66,0.50); --shadow-btn-hover: 0 8px 24px rgba(61,110,66,0.65), 0 2px 8px rgba(0,0,0,0.25); --clr-primary-muted: var(--clr-primary-xlight); } }