/* ========================================================================== EduCore: Design Tokens Every colour, size, and timing in the app resolves to a variable declared here. Nothing downstream hardcodes a hex value. Two layers: 1. Palette: raw scales. Theme-independent. Never used directly in components; they exist so role tokens have something to point at. 2. Role tokens: semantic names (surface, border, text). These ARE used by components, and they are what the dark theme overrides. One override block, whole app re-themes. The scheme is the one the public pages set: a warm cream field, deep green as the brand, amber as the colour that points. It used to live in assets/css/marketing.css, re-keyed inside a .ec-mk scope so it could not reach the application. It reaches the application now, and this file is the single place it is declared — marketing.css keeps only the --mk-* brand extras and its own type scale. ========================================================================== */ /* --- Font ---------------------------------------------------------------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* ====================================================================== LAYER 1: PALETTE ====================================================================== */ /* Brand: forest green. Was indigo. The public pages settled the brand on a deep green over a warm cream field, and an application that greets you in one palette and signs you in to another is two products. The scale keeps the indigo scale's shape — same ten steps, same role at each step — so every --ec-primary-* consumer re-themes without a rule changing. 600 is the brand green; 500 is the step the dark theme lifts to. */ --ec-primary-50: #f1f7f3; --ec-primary-100: #e4efe7; --ec-primary-200: #c6ddce; --ec-primary-300: #9ec5ac; --ec-primary-400: #55b58a; --ec-primary-500: #43a379; --ec-primary-600: #266d53; --ec-primary-700: #1d5943; --ec-primary-800: #164634; --ec-primary-900: #103427; /* The dark theme's accent tint, and the ink that sits on the lighter green it lifts to. Neither belongs on the ramp: one is a desaturated wash, the other is a near-black chosen for contrast rather than for hue. */ /* The wash is a step darker than the marketing sheet's #24352c. Measured against the accent green it carries, that value read 4.17:1 — an accent badge's own label under the 4.5 it needs. */ --ec-primary-wash: #1d2c24; --ec-primary-ink: #0d1f17; /* Neutral, light field: warm paper. Two ramps rather than one, because the scheme is not one grey read from both ends — the page is cream and the ink is a green-cast grey, and forcing them onto a single scale would put a colour in the middle that neither theme ever uses. */ --ec-paper-0: #ffffff; --ec-paper-50: #faf6ee; --ec-paper-100: #f6f2e7; --ec-paper-200: #f2edde; --ec-paper-300: #e7e0cd; --ec-paper-400: #d6cbb3; /* Off the end of the warm ramp on purpose. --ec-border-strong is the edge of a form field, which WCAG 1.4.11 asks to clear 3:1 against what it sits on, and no tint of the paper does: #d6cbb3 measures 1.49:1 on the cream field and 1.61:1 on a white card. This is the lightest warm grey that clears 3:1 on both. */ --ec-paper-500: #8e8776; /* Neutral, ink and dark field: green-cast greys, lightest first. */ --ec-ink-50: #edf1ec; --ec-ink-200: #a5b2a8; /* #7b877e measured 4.39:1 as the dark theme's --ec-text-subtle, which carries normal-weight body copy and section headings. Lifted until it clears 4.5 on both the dark surface and the dark page. */ --ec-ink-300: #828e85; /* The dark theme's form-field edge, for the same reason --ec-paper-500 exists: #414d42 read 1.85:1 against the surface. */ --ec-ink-350: #6b7a6d; --ec-ink-400: #626f66; --ec-ink-500: #55645b; --ec-ink-600: #414d42; --ec-ink-700: #2e392f; --ec-ink-750: #273028; --ec-ink-800: #202822; --ec-ink-850: #1e2a24; --ec-ink-900: #1a211b; --ec-ink-950: #11160f; /* Semantic. Green now means "brand" as well as "went well", so success is the one that had to work hardest: it is a brighter, more saturated green than --ec-accent's deep forest, and it never appears as a page-level fill. Every ink here is a step darker than the scheme it replaced, because the pairing that has to clear AA is the badge — --ec-success on --ec-success-soft, not on the page. The old pairs measured 3.00, 2.86, 3.95 and 3.29:1; these measure 4.6 to 6.4:1. */ --ec-success: #15803d; --ec-success-soft: #dcfce7; --ec-warning: #92400e; --ec-warning-soft: #fef3c7; --ec-danger: #b91c1c; --ec-danger-soft: #fee2e2; --ec-info: #0e7490; --ec-info-soft: #cffafe; /* The marketer console's own colour. Amber is the operator, blue is the secretariat, and the marketer's rail used to borrow the amber — so the two consoles outside the tenant boundary were told apart by reading the badge. Violet is the sixth chart hue a step darker: 6.4:1 on the page, 4.9:1 on its own soft tint. */ --ec-marketer: #6d28d9; --ec-marketer-soft: #ede9fe; /* Categorical chart series. Ordered for maximum adjacent contrast, and chosen to stay distinguishable in both themes and for common colour vision deficiencies (no red/green adjacency, including the wrap from the last series back to the first in a pie). Series 1 is the brand green: the first series is the one the reader is told to care about, so it should be the colour the product is. The old emerald at series 3 was close enough to that green to be read as the same series, so it is gone. */ --ec-chart-1: #266d53; /* green */ --ec-chart-2: #f4a71d; /* amber */ --ec-chart-3: #2563eb; /* blue */ --ec-chart-4: #e11d48; /* rose */ --ec-chart-5: #0891b2; /* cyan */ --ec-chart-6: #7c3aed; /* violet */ /* The ink that goes ON each series colour, for the one place a series is used as a FILL with something drawn inside it: the module launcher's tiles. Same reasoning as --ec-accent-on, and the same trap — a glyph was painted #fff on all six, which is fine on the dark green and wrong on the amber, where white measures 2.0:1. Amber takes the dark ink instead, at 8.5:1. The other five clear 3:1 white and keep it (blue 8.0, violet 5.7, rose 4.7, green 6.4, cyan 3.7). A glyph on a labelled tile is decorative — the label under it carries the meaning, so 1.4.11 does not strictly bite. It still has to not look washed out. */ --ec-chart-1-on: var(--ec-paper-0); --ec-chart-2-on: var(--ec-primary-ink); --ec-chart-3-on: var(--ec-paper-0); --ec-chart-4-on: var(--ec-paper-0); --ec-chart-5-on: var(--ec-paper-0); --ec-chart-6-on: var(--ec-paper-0); /* Pastel tiles: the icon squares on the sign-in panel, on the feature grid and inside the drawn dashboard. The categorical shape of --ec-chart-*, inverted. There the token is a saturated FILL and -on is the ink laid over it; here the token is a pale fill and -on is a saturated stroke, because these draw a coloured line icon on a tinted square rather than a white glyph on a solid one. Four, not six: the sign-in panel has four slots and the feature grid repeats those four rather than inventing two more hues nobody can name. Mint and peach point at ramps that already exist; only lavender and sky are new, because nothing on the brand ramp or the paper ramp is either colour. Measured, ink on tile: 1 mint #1d5943 on #e4efe7 7.0:1 2 lavender #5b21b6 on #ece9fb 7.5:1 3 sky #1d4ed8 on #dceafc 5.5:1 4 peach #92400e on #fdebd2 6.1:1 The tiles themselves measure 1.17-1.22:1 on --ec-surface and 1.00-1.04:1 on --ec-surface-2. That is why anything carrying one sits on --ec-surface and never on the warm tile .ec-mk-card uses: on the cream card the tint is literally invisible. A tile is decorative — the label under it carries the meaning — so 1.4.11 does not bite, but a tint nobody can see is not a design. The three new hues are named on the ramp rather than written straight into --ec-tint-*, and that is not tidiness. The sign-in panel is painted a fixed green in BOTH themes, so it has to re-key the tints back to their light values locally — and it cannot do that if the only name for a light value is a token the dark block overrides. Layer 1 never moves; that is what makes it referenceable from a pinned surface. Mint and the mint ink already had ramp names, which is why only three pairs are added. */ --ec-lilac-100: #ece9fb; --ec-lilac-700: #5b21b6; --ec-sky-100: #dceafc; --ec-sky-700: #1d4ed8; --ec-sand-100: #fdebd2; --ec-sand-700: #92400e; --ec-tint-1: var(--ec-primary-100); /* mint */ --ec-tint-2: var(--ec-lilac-100); /* lavender */ --ec-tint-3: var(--ec-sky-100); /* sky */ --ec-tint-4: var(--ec-sand-100); /* peach */ --ec-tint-1-on: var(--ec-primary-700); --ec-tint-2-on: var(--ec-lilac-700); --ec-tint-3-on: var(--ec-sky-700); --ec-tint-4-on: var(--ec-sand-700); /* ====================================================================== LAYER 2: ROLE TOKENS (light theme) ====================================================================== */ --ec-bg: var(--ec-paper-50); --ec-surface: var(--ec-paper-0); --ec-surface-2: var(--ec-paper-200); --ec-surface-hover: var(--ec-paper-100); --ec-border: var(--ec-paper-300); --ec-border-strong: var(--ec-paper-500); --ec-text: var(--ec-ink-850); --ec-text-muted: var(--ec-ink-500); /* Not decoration: --ec-text-subtle carries normal-weight body copy, so it has to clear 4.5:1 rather than the 3:1 a hairline gets. It measures 5.4:1 on white and still reads a step lighter than --ec-text-muted. */ --ec-text-subtle: var(--ec-ink-400); --ec-text-inverse: var(--ec-paper-0); --ec-accent: var(--ec-primary-600); --ec-accent-hover: var(--ec-primary-700); --ec-accent-soft: var(--ec-primary-100); --ec-accent-on: var(--ec-paper-0); /* The focus ring's colour, as a variable rather than --ec-accent directly. The ring is drawn in the accent, which contrasts with every surface in the scheme except the accent itself — so anything painted --ec-accent re-keys this to --ec-accent-on and draws the ring inside its own fill. See the block at the end of layout.css. */ --ec-focus: var(--ec-accent); /* Sidebar is styled independently of the page surface so it can stay dark in light mode later without touching component CSS. */ --ec-sidebar-bg: var(--ec-paper-0); /* The platform console's rail. Warmed rather than recoloured: it has to be recognisable at a glance without becoming a second design language. */ --ec-sidebar-owner-bg: color-mix(in srgb, var(--ec-warning) 6%, var(--ec-paper-0)); /* The secretariat console's rail. Same treatment, a different colour: this scope reads figures and changes nothing, so it is stated in the info colour rather than warned about in the owner's amber. */ --ec-sidebar-secretariat-bg: color-mix(in srgb, var(--ec-info) 6%, var(--ec-paper-0)); /* The marketer console's rail: same treatment, its own colour. */ --ec-sidebar-marketer-bg: color-mix(in srgb, var(--ec-marketer) 6%, var(--ec-paper-0)); --ec-sidebar-border: var(--ec-paper-300); --ec-sidebar-text: var(--ec-ink-600); --ec-sidebar-text-muted: var(--ec-ink-400); --ec-sidebar-hover-bg: var(--ec-paper-100); --ec-sidebar-active-bg: var(--ec-primary-600); --ec-sidebar-active-text: var(--ec-paper-0); --ec-sidebar-section: var(--ec-ink-400); /* The sticky header floats over a cream page, so its own fill is white rather than a wash of the page: a translucent cream over cream has no edge at all once the content scrolls under it. */ --ec-header-bg: color-mix(in srgb, var(--ec-paper-0) 85%, transparent); --ec-header-border: var(--ec-paper-300); --ec-overlay: rgb(17 22 15 / 0.5); /* ====================================================================== TYPE ====================================================================== */ --ec-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ec-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --ec-text-2xs: 0.6875rem; /* 11 */ --ec-text-xs: 0.75rem; /* 12 */ --ec-text-sm: 0.8125rem; /* 13 */ --ec-text-md: 0.875rem; /* 14: body default */ --ec-text-base:1rem; /* 16 */ --ec-text-lg: 1.25rem; /* 20 */ --ec-text-xl: 1.5rem; /* 24 */ --ec-text-2xl: 2rem; /* 32 */ --ec-weight-normal: 400; --ec-weight-medium: 500; --ec-weight-semibold: 600; --ec-weight-bold: 700; --ec-leading-tight: 1.25; --ec-leading-normal: 1.5; --ec-leading-loose: 1.7; /* ====================================================================== SPACE: 4px base ====================================================================== */ --ec-space-1: 0.25rem; /* 4 */ --ec-space-2: 0.5rem; /* 8 */ --ec-space-3: 0.75rem; /* 12 */ --ec-space-4: 1rem; /* 16 */ --ec-space-5: 1.25rem; /* 20 */ --ec-space-6: 1.5rem; /* 24 */ --ec-space-8: 2rem; /* 32 */ --ec-space-12: 3rem; /* 48 */ /* ====================================================================== RADIUS / SHADOW / MOTION ====================================================================== */ --ec-radius-sm: 6px; --ec-radius-md: 10px; --ec-radius-lg: 14px; --ec-radius-full: 999px; --ec-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06); --ec-shadow-md: 0 2px 4px rgb(15 23 42 / 0.04), 0 4px 12px rgb(15 23 42 / 0.08); --ec-shadow-lg: 0 8px 24px rgb(15 23 42 / 0.12), 0 2px 8px rgb(15 23 42 / 0.06); --ec-ring: 0 0 0 3px color-mix(in srgb, var(--ec-focus) 32%, transparent); --ec-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1); --ec-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); /* ====================================================================== LAYOUT DIMENSIONS ====================================================================== */ --ec-sidebar-w: 264px; --ec-header-h: 64px; --ec-content-max: 1600px; /* ====================================================================== Z-INDEX: declared together so stacking bugs are a lookup, not a hunt ====================================================================== */ --ec-z-sidebar: 1040; --ec-z-overlay: 1035; --ec-z-header: 1030; --ec-z-dropdown:1050; } /* ========================================================================== DARK THEME Only role tokens are overridden. Palette and every component rule stay untouched. That is the entire point of the two-layer split. ========================================================================== */ [data-theme='dark'] { --ec-bg: var(--ec-ink-950); --ec-surface: var(--ec-ink-900); --ec-surface-2: var(--ec-ink-800); --ec-surface-hover: var(--ec-ink-750); --ec-border: var(--ec-ink-700); --ec-border-strong: var(--ec-ink-350); --ec-text: var(--ec-ink-50); --ec-text-muted: var(--ec-ink-200); --ec-text-subtle: var(--ec-ink-300); --ec-text-inverse: var(--ec-ink-950); --ec-accent: var(--ec-primary-500); --ec-accent-hover: var(--ec-primary-400); --ec-accent-soft: var(--ec-primary-wash); /* The dark theme lightens --ec-accent, which leaves white-on-accent at 3.1:1 everywhere components.css pairs the two — the primary button, the skip link, the active sidebar row. The ink goes dark to match the lighter green instead, which measures 5.5:1. */ --ec-accent-on: var(--ec-primary-ink); --ec-sidebar-bg: var(--ec-ink-900); --ec-sidebar-owner-bg: color-mix(in srgb, var(--ec-warning) 14%, var(--ec-ink-900)); --ec-sidebar-secretariat-bg: color-mix(in srgb, var(--ec-info) 14%, var(--ec-ink-900)); --ec-sidebar-marketer-bg: color-mix(in srgb, var(--ec-marketer) 14%, var(--ec-ink-900)); --ec-sidebar-border: var(--ec-ink-700); --ec-sidebar-text: var(--ec-ink-200); --ec-sidebar-text-muted: var(--ec-ink-300); --ec-sidebar-hover-bg: var(--ec-ink-750); /* Not --ec-primary-600 as in the light theme: the brand green measures 2.6:1 against the dark rail, so an active row was told apart by its text alone. The lighter green clears 5.2:1 against the rail and takes the dark ink on top. */ --ec-sidebar-active-bg: var(--ec-primary-500); --ec-sidebar-active-text: var(--ec-primary-ink); --ec-sidebar-section: var(--ec-ink-300); --ec-header-bg: color-mix(in srgb, var(--ec-ink-900) 85%, transparent); --ec-header-border: var(--ec-ink-700); --ec-overlay: rgb(6 9 5 / 0.7); /* The light theme's semantic inks are chosen to sit on a pale tint and are far too dark for a near-black surface — #b91c1c measures 3.3:1 there. So the dark theme lifts each ink two steps and drops the wash behind it from 18% to 10%, which is what puts the badge pairing back over 4.5:1. */ --ec-success: #4ade80; --ec-warning: #fbbf24; --ec-danger: #ff9b9b; --ec-info: #38bdf8; --ec-marketer: #a78bfa; --ec-success-soft: color-mix(in srgb, var(--ec-success) 10%, transparent); --ec-warning-soft: color-mix(in srgb, var(--ec-warning) 10%, transparent); --ec-danger-soft: color-mix(in srgb, var(--ec-danger) 10%, transparent); --ec-info-soft: color-mix(in srgb, var(--ec-info) 10%, transparent); --ec-marketer-soft: color-mix(in srgb, var(--ec-marketer) 10%, transparent); /* Nudge chart hues brighter so they hold up against a near-black plot area */ --ec-chart-1: #43a379; --ec-chart-2: #fbbf24; --ec-chart-3: #60a5fa; --ec-chart-4: #fb7185; --ec-chart-5: #22d3ee; --ec-chart-6: #a78bfa; /* Every one of those six is a light colour, so every one of them takes the dark ink — the same flip --ec-accent-on makes, for the same reason. White on the lifted blue measured 2.5:1 and on the lifted cyan 1.9. */ --ec-chart-1-on: var(--ec-primary-ink); --ec-chart-2-on: var(--ec-primary-ink); --ec-chart-3-on: var(--ec-primary-ink); --ec-chart-4-on: var(--ec-primary-ink); --ec-chart-5-on: var(--ec-primary-ink); --ec-chart-6-on: var(--ec-primary-ink); /* The tints take exactly the treatment the semantic block above takes: the ink lifts to a colour that survives a near-black field, and the tile becomes a thin wash of that same ink instead of a pale pastel. A mint square on #11160f is the light theme leaking through. Every lifted ink here is one the dark theme already declares, so a seventh hue is not introduced: mint borrows --ec-primary-400, lavender and sky borrow the lifted chart violet and blue, peach borrows the lifted warning. 12%, one step above the semantic block's 10%, because a tile is a shape the eye has to find and a badge is text the eye is already on. Measured, ink on the composited tile, worst case (over --ec-surface; over --ec-bg every pair is 0.7-1.1 higher): 1 mint #55b58a on #213328 5.3:1 2 lavender #a78bfa on #2b2e36 5.0:1 3 sky #60a5fa on #223136 5.3:1 4 peach #fbbf24 on #35341c 7.6:1 */ --ec-tint-1-on: var(--ec-primary-400); --ec-tint-2-on: var(--ec-chart-6); --ec-tint-3-on: var(--ec-chart-3); --ec-tint-4-on: var(--ec-warning); --ec-tint-1: color-mix(in srgb, var(--ec-tint-1-on) 12%, transparent); --ec-tint-2: color-mix(in srgb, var(--ec-tint-2-on) 12%, transparent); --ec-tint-3: color-mix(in srgb, var(--ec-tint-3-on) 12%, transparent); --ec-tint-4: color-mix(in srgb, var(--ec-tint-4-on) 12%, transparent); --ec-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3); --ec-shadow-md: 0 2px 8px rgb(0 0 0 / 0.35); --ec-shadow-lg: 0 8px 28px rgb(0 0 0 / 0.45); }