/* ============================================================================ EDUEGATE PARENT PORTAL — DESIGN TOKENS Source of truth. Light = :root (default). Dark = :root[data-theme="dark"]. Groups: Brand · Foreground · Status (success/danger/warning/info) · Card 1 · Card 2 · Tile colours. Dark mode: set (persist in localStorage). ============================================================================ */ :root { --eg3-font: 'Poppins', sans-serif; /* ---------------- Brand ---------------- */ --eg3-brand-rest: #0F6CBD; --eg3-brand-hover: #115EA3; --eg3-brand-pressed: #0C3B5E; --eg3-brand-selected: #0F548C; /* ---------------- Foreground (text) ---------------- */ --eg3-fg-1: #242424; --eg3-fg-2: #424242; --eg3-fg-3: #616161; --eg3-fg-disabled: #BDBDBD; /* ---------------- Status / success ---------------- */ --eg3-success-bg: #F1FAF1; --eg3-success-fg: #0E700E; --eg3-success-stroke: #9FD89F; /* ---------------- Status / danger ---------------- */ --eg3-danger-bg: #FDF3F4; --eg3-danger-fg: #B10E1C; --eg3-danger-stroke: #EEACB2; /* ---------------- Status / warning ---------------- */ --eg3-warning-bg: #FFF9F5; --eg3-warning-fg: #BC4B09; --eg3-warning-stroke: #FDCFB4; /* ---------------- Status / info ---------------- */ --eg3-info-bg: #D0E7F8; --eg3-info-fg: #004377; --eg3-info-stroke: #0078D4; /* ---------------- Card / 1 ---------------- */ --eg3-card-rest: #FFFFFF; --eg3-card-hover: #F5F5F5; --eg3-card-pressed: #E0E0E0; --eg3-card-selected: #EBEBEB; /* ---------------- Card / 2 ---------------- */ --eg3-card2-rest: #FAFAFA; --eg3-card2-hover: #F0F0F0; --eg3-card2-pressed: #DBDBDB; --eg3-card2-selected: #E6E6E6; /* ---------------- Tile / category ---------------- */ --eg3-tile-assessment: #02494C; --eg3-tile-notes: #63276D; --eg3-tile-lesson: #2C3C85; --eg3-tile-leave: #712D09; --eg3-tile-tc: #4C3867; --eg3-tile-teachers: #23330B; --eg3-tile-forms: #8A5600; --eg3-tile-maroon: #630332; } :root[data-theme="dark"] { /* Brand */ --eg3-brand-rest: #115EA3; --eg3-brand-hover: #115EA3; --eg3-brand-pressed: #0C3B5E; --eg3-brand-selected: #0F548C; /* Foreground */ --eg3-fg-1: #FFFFFF; --eg3-fg-2: #D6D6D6; --eg3-fg-3: #ADADAD; --eg3-fg-disabled: #5C5C5C; /* success */ --eg3-success-bg: #052505; --eg3-success-fg: #54B054; --eg3-success-stroke: #107C10; /* danger */ --eg3-danger-bg: #3B0509; --eg3-danger-fg: #DC626D; --eg3-danger-stroke: #C50F1F; /* warning */ --eg3-warning-bg: #4A1E04; --eg3-warning-fg: #FAA06B; --eg3-warning-stroke: #F7630C; /* info */ --eg3-info-bg: #002440; --eg3-info-fg: #A9D3F2; --eg3-info-stroke: #5CAAE5; /* Card / 1 */ --eg3-card-rest: #292929; --eg3-card-hover: #3D3D3D; --eg3-card-pressed: #1F1F1F; --eg3-card-selected: #383838; /* Card / 2 */ --eg3-card2-rest: #1F1F1F; --eg3-card2-hover: #333333; --eg3-card2-pressed: #141414; --eg3-card2-selected: #2E2E2E; /* tile colours reused as-is; override here if you want dark tints */ color-scheme: dark; } /* ============================================================================ EXTENSION TOKENS — needed by the app but not (yet) in the Figma token set. If you add these to Figma later, move their values into the blocks above. ============================================================================ */ :root { --eg3-accent: #FFD900; /* nav active/hover yellow */ --eg3-bg: #F5F8FA; /* page background */ --eg3-border: var(--eg3-card-pressed); /* default 1px stroke (#E0E0E0) */ --eg3-hover: #EFF4FA; /* row/menu-item hover wash */ /* text/icons sitting ON brand/tile/status fills — stays white in dark mode (unlike card-white, which flips) */ --eg3-fg-on-brand: #FFFFFF; /* elevation scale */ --eg3-shadow-sm: 0 1px 4px rgba(0, 0, 0, .04); /* flat panels/forms */ --eg3-shadow: 0 2px 8px rgba(0, 0, 0, .06); /* cards */ --eg3-shadow-lg: 0 12px 32px rgba(0, 0, 0, .16); /* dropdowns/popovers */ /* interaction tints (brand @ alpha) */ --eg3-focus-ring: 0 0 0 2px rgba(15, 108, 189, .18); /* input/select focus */ --eg3-brand-soft: rgba(15, 108, 189, .15); /* chip ✕ buttons etc. */ } :root[data-theme="dark"] { --eg3-accent: #FFD900; --eg3-bg: #141414; --eg3-border: #3A3A3A; --eg3-hover: #2E2E2E; --eg3-shadow-sm: 0 1px 4px rgba(0, 0, 0, .35); --eg3-shadow: 0 2px 8px rgba(0, 0, 0, .45); --eg3-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55); --eg3-focus-ring: 0 0 0 2px rgba(92, 170, 229, .3); --eg3-brand-soft: rgba(92, 170, 229, .2); } /* ============================================================================ COMPONENT TOKENS — Button (Figma 776:241). Aliases of Brand/Status/Card tokens, so they follow the theme automatically. Literals below are the Figma hover/pressed steps that have no standalone token yet. ============================================================================ */ :root { --eg3-btn-primary-bg: var(--eg3-brand-rest); --eg3-btn-primary-hover: var(--eg3-brand-hover); --eg3-btn-primary-active: var(--eg3-brand-pressed); --eg3-btn-danger-bg: var(--eg3-danger-fg); --eg3-btn-danger-hover: #941722; --eg3-btn-danger-active: #710811; --eg3-btn-success-bg: var(--eg3-success-fg); --eg3-btn-success-hover: #0B5C0B; --eg3-btn-success-active: #084B08; --eg3-btn-secondary-border: var(--eg3-fg-3); --eg3-btn-secondary-text: var(--eg3-fg-1); --eg3-btn-secondary-hover: var(--eg3-card-hover); --eg3-btn-secondary-active: var(--eg3-card-pressed); --eg3-btn-outline-border: var(--eg3-info-stroke); --eg3-btn-outline-text: var(--eg3-brand-rest); --eg3-btn-outline-text-hover: var(--eg3-brand-hover); --eg3-btn-outline-hover: var(--eg3-info-bg); --eg3-btn-outline-active: #B6D5ED; } /* ============================================================================ COMPONENT TOKENS — Search (Figma 810:39). 1px border steps: rest #D1D1D1 → hover fg-3 → active brand. ============================================================================ */ :root { --eg3-search-border-rest: #D1D1D1; --eg3-search-border-hover: var(--eg3-fg-3); --eg3-search-border-active: var(--eg3-brand-rest); } :root[data-theme="dark"] { --eg3-search-border-rest: #4A4A4A; }