/* ========================================================================== AI SEO Manager — Design tokens -------------------------------------------------------------------------- The ONLY file in which a raw colour value may appear. Every component reads roles (--fg-primary, --sev-critical-ink, --series-1 …), never hex. Theme resolution order (highest wins): 1. ← explicit user choice, persisted 2. @media (prefers-color-scheme) ← OS setting 3. light ← default Palette provenance: the categorical, sequential, diverging and status values are the validated reference set. Re-validated against THIS app's surfaces (light #ffffff, dark #14171c): light adjacent CVD ΔE 9.1 · normal ΔE 19.6 · 3 slots WARN <3:1 contrast dark adjacent CVD ΔE 8.4 · normal ΔE 19.3 · all 8 PASS ≥3:1 first 3 slots also pass all-pairs in both modes (scatter/heat/multiples) The light-mode contrast WARN is discharged by the relief rule: charts here always ship visible direct labels AND a table view. Do not add a 9th series hue — fold to "Other", facet, or use small multiples. ========================================================================== */ :root { color-scheme: light; /* ---------- surfaces ---------------------------------------------------- */ --plane: #f6f7f9; /* page background, behind cards */ --surface-1: #ffffff; /* card / chart surface (validator target) */ --surface-2: #f1f3f6; /* raised: table head, inputs, wells */ --surface-3: #e8ebf0; /* hover / pressed */ --surface-inverse: #14171c; /* tooltips, inverted chips */ --scrim: rgba(15, 17, 21, .48); /* ---------- ink -------------------------------------------------------- */ --fg-primary: #0f1115; /* 18.9:1 on surface-1 */ --fg-secondary: #4a5160; /* 7.96:1 */ --fg-muted: #6b7280; /* 4.83:1 — axis labels, meta */ --fg-inverse: #f2f4f7; --fg-on-accent: #ffffff; /* ---------- lines ------------------------------------------------------ */ --border: rgba(15, 17, 21, .10); --border-strong: rgba(15, 17, 21, .18); --gridline: #e6e8ec; /* hairline, solid, never dashed */ --axis: #c9cdd6; /* ---------- brand / accent --------------------------------------------- */ --accent: #2a78d6; --accent-hover: #256abf; --accent-active: #1c5cab; --accent-soft: #e5effa; /* 12% tint over white */ --accent-ink: #1a4f91; /* 7.0:1 on --accent-soft */ --focus-ring: #2a78d6; /* ---------- status (fixed, never themed, never reused as a series) ------ */ --sev-critical: #d03b3b; --sev-serious: #ec835a; --sev-warning: #fab219; --sev-good: #0ca30c; --sev-info: #2a78d6; --sev-neutral: #6b7280; /* badge fills + inks — all ≥6.4:1 ink-on-fill, so a severity never relies on hue alone; every badge also carries an icon and a text label. */ --sev-critical-bg: #f9e7e7; --sev-critical-ink: #9c1f1f; --sev-serious-bg: #fdf0eb; --sev-serious-ink: #8f3f18; --sev-warning-bg: #fef6e3; --sev-warning-ink: #7a5200; --sev-good-bg: #e2f4e2; --sev-good-ink: #046004; --sev-info-bg: #e5effa; --sev-info-ink: #1a4f91; --sev-neutral-bg: #eef0f3; --sev-neutral-ink: #414855; /* delta cues: direction × whether up is good */ --delta-up-good: #006300; --delta-down-bad: #b3261e; /* ---------- categorical series (fixed order — NEVER cycled) ------------ */ --series-1: #2a78d6; /* blue */ --series-2: #eb6834; /* orange */ --series-3: #1baf7a; /* aqua */ --series-4: #eda100; /* yellow */ --series-5: #e87ba4; /* magenta */ --series-6: #008300; /* green */ --series-7: #4a3aa7; /* violet */ --series-8: #e34948; /* red */ /* ---------- sequential ramp (single hue, light→dark) ------------------- Magnitude only: heatmaps, the crawler-access matrix, choropleths. For ORDINAL marks start no lighter than --seq-250 on light. */ --seq-100: #cde2fb; --seq-150: #b7d3f6; --seq-200: #9ec5f4; --seq-250: #86b6ef; --seq-300: #6da7ec; --seq-350: #5598e7; --seq-400: #3987e5; --seq-450: #2a78d6; --seq-500: #256abf; --seq-550: #1c5cab; --seq-600: #184f95; --seq-650: #104281; --seq-700: #0d366b; /* ---------- diverging (blue ↔ red, neutral gray midpoint) -------------- */ --div-neg-3: #1c5cab; --div-neg-2: #3987e5; --div-neg-1: #9ec5f4; --div-mid: #f0efec; --div-pos-1: #f3b0af; --div-pos-2: #e34948; --div-pos-3: #a32220; /* ---------- typography ------------------------------------------------- One family everywhere, including the hero figure. No display or serif face — it reads as decoration on an instrument. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-arabic: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif; --text-2xs: .6875rem; /* 11 — table micro-labels */ --text-xs: .75rem; /* 12 — meta, axis ticks */ --text-sm: .8125rem; /* 13 — table body, dense UI */ --text-md: .875rem; /* 14 — body default */ --text-lg: 1rem; /* 16 — card titles */ --text-xl: 1.125rem; /* 18 — section headings */ --text-2xl: 1.375rem; /* 22 — page title */ --text-3xl: 1.75rem; /* 28 — stat-tile value */ --text-4xl: 2.25rem; /* 36 */ --text-hero: 3rem; /* 48 — exactly one per view */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.2; --leading-snug: 1.35; --leading-normal: 1.5; --leading-relaxed: 1.65; --tracking-tight: -0.011em; --tracking-wide: 0.04em; /* ---------- space (4px base) ------------------------------------------- */ --space-0: 0; --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem;--space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem;--space-12: 3rem; --space-16: 4rem; /* ---------- radii ------------------------------------------------------- */ --radius-xs: 3px; --radius-sm: 5px; --radius-md: 8px; --radius-lg: 12px;--radius-xl: 16px; --radius-full: 999px; /* ---------- elevation -------------------------------------------------- Rings first, shadows sparingly — a dense dashboard turns to mud when every card floats. */ --ring: inset 0 0 0 1px var(--border); --shadow-sm: 0 1px 2px rgba(15, 17, 21, .06); --shadow-md: 0 4px 12px -2px rgba(15, 17, 21, .10), 0 2px 4px -2px rgba(15, 17, 21, .06); --shadow-lg: 0 16px 40px -8px rgba(15, 17, 21, .18), 0 4px 12px -4px rgba(15, 17, 21, .10); /* ---------- motion ----------------------------------------------------- */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --dur-fast: 110ms; --dur-base: 180ms; --dur-slow: 280ms; /* ---------- layout ----------------------------------------------------- */ --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; --content-max: 1600px; --z-sticky: 20; --z-drawer: 40; --z-modal: 60; --z-toast: 80; --z-tooltip: 100; } /* ========================================================================== DARK — a selected set, not an inverted one. Every categorical slot is the same hue re-stepped for the dark surface and re-validated against it. Declared under BOTH scopes so the toggle wins over the OS either way. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:where(:not([data-theme="light"])) { color-scheme: dark; --plane: #0d0f13; --surface-1: #14171c; --surface-2: #1a1e25; --surface-3: #222731; --surface-inverse: #f2f4f7; --scrim: rgba(0, 0, 0, .64); --fg-primary: #f2f4f7; --fg-secondary: #a9b2c1; --fg-muted: #7d8797; --fg-inverse: #14171c; --fg-on-accent: #ffffff; --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .18); --gridline: #232830; --axis: #343b46; --accent: #3987e5; --accent-hover: #5598e7; --accent-active: #6da7ec; --accent-soft: #21354f; --accent-ink: #a8cbf4; --sev-critical-bg: #42242a; --sev-critical-ink: #f0a3a3; --sev-serious-bg: #483431; --sev-serious-ink: #f5bda6; --sev-warning-bg: #4b3f22; --sev-warning-ink: #fbd67e; --sev-good-bg: #173b20; --sev-good-ink: #7ede7e; --sev-info-bg: #21354f; --sev-info-ink: #a8cbf4; --sev-neutral-bg: #262b34; --sev-neutral-ink: #b6bec9; --delta-up-good: #0ca30c; --delta-down-bad: #e66767; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; --div-neg-3: #9ec5f4; --div-neg-2: #3987e5; --div-neg-1: #1c5cab; --div-mid: #383835; --div-pos-1: #7d2523; --div-pos-2: #e34948; --div-pos-3: #f3b0af; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .50), 0 2px 4px -2px rgba(0, 0, 0, .40); --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, .64), 0 4px 12px -4px rgba(0, 0, 0, .48); } } :root[data-theme="dark"] { color-scheme: dark; --plane: #0d0f13; --surface-1: #14171c; --surface-2: #1a1e25; --surface-3: #222731; --surface-inverse: #f2f4f7; --scrim: rgba(0, 0, 0, .64); --fg-primary: #f2f4f7; --fg-secondary: #a9b2c1; --fg-muted: #7d8797; --fg-inverse: #14171c; --fg-on-accent: #ffffff; --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .18); --gridline: #232830; --axis: #343b46; --accent: #3987e5; --accent-hover: #5598e7; --accent-active: #6da7ec; --accent-soft: #21354f; --accent-ink: #a8cbf4; --sev-critical-bg: #42242a; --sev-critical-ink: #f0a3a3; --sev-serious-bg: #483431; --sev-serious-ink: #f5bda6; --sev-warning-bg: #4b3f22; --sev-warning-ink: #fbd67e; --sev-good-bg: #173b20; --sev-good-ink: #7ede7e; --sev-info-bg: #21354f; --sev-info-ink: #a8cbf4; --sev-neutral-bg: #262b34; --sev-neutral-ink: #b6bec9; --delta-up-good: #0ca30c; --delta-down-bad: #e66767; --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500; --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767; --div-neg-3: #9ec5f4; --div-neg-2: #3987e5; --div-neg-1: #1c5cab; --div-mid: #383835; --div-pos-1: #7d2523; --div-pos-2: #e34948; --div-pos-3: #f3b0af; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .40); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, .50), 0 2px 4px -2px rgba(0, 0, 0, .40); --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, .64), 0 4px 12px -4px rgba(0, 0, 0, .48); } /* Forced-colors / high-contrast: hand identity to texture + system colours. Charts must already carry legends and direct labels for this to work. */ @media (forced-colors: active) { :root { --border: CanvasText; --border-strong: CanvasText; --gridline: CanvasText; } .u-texture-on { --texture: 1; } } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; } }