/* ============================================================================= Advisable.AI — Starter Design System · Design Tokens ----------------------------------------------------------------------------- Single source of truth for the design system. Pure CSS custom properties, no build step required (production stays no-build — see ../tokens/README.md). LAYERS (read top-to-bottom): 1. PRIMITIVES — raw palette/scale values (teal-*, neutral-*, space-*, ...). Never reference these directly from a component; they are the vocabulary, not the API. 2. SEMANTIC ALIASES (--adv-color-*, --adv-text-*, ...) — what components actually use. Dark theme only re-points these aliases, so components work in both themes without change. SOURCES: every brand/legacy-derived value is annotated with where it came from in the current codebase (src/brand.js, src/landingUi.js, src/panelUi.js, src/chatUi.js, src/connectorPageUi.js). See the MAPPING TABLE in README.md. CONTRAST: ratios are pre-computed WCAG 2.1. "AA" = ≥4.5:1 normal text, ≥3:1 large text (≥24px / ≥18.66px bold) and UI components. Pairs that FAIL are marked and restricted to decorative use. DECISIONS encoded here (resolve the 3 clashing palettes found in the audit): - ONE accent: brand teal is the only UI accent (actions, links, focus). - Marketing blue #4f7dff and violet #a855f7 are RETIRED from UI chrome (gradient CTA + .grad text retired). Blue survives ONLY as the semantic "info" family, darkened to pass AA. - ONE font: Manrope for marketing AND app (was system-ui in the panel). ============================================================================= */ :root { /* =========================================================================== 1 · PRIMITIVES =========================================================================== */ /* --- Teal / brand scale ------------------------------------------------------ Built around the logo teal. Darker steps come from the existing landing teal palette so they already ship in production. (*) = new intermediate step, proposal — needs a visual check before use. */ --adv-teal-50: #f0fbf8; /* = landingUi.js teal set */ --adv-teal-100: #e5f7f1; /* = landingUi.js teal set */ --adv-teal-200: #bfebe3; /* = landingUi.js teal set */ --adv-teal-300: #87d5c7; /* = landingUi.js teal set */ --adv-teal-400: #5ccabd; /* new (*) — light hover on dark, decorative */ --adv-teal-500: #32bcad; /* = src/brand.js theme-color & logo #32bcad — DECORATIVE fills/icons/brand marks only; white text on it = 2.35:1 FAIL */ --adv-teal-600: #0c8c79; /* = landingUi.js teal set — white text 4.16:1, LARGE text only */ --adv-teal-700: #087365; /* = landingUi.js teal set — white text 5.75:1 AA → primary button bg + link color */ --adv-teal-800: #075d52; /* = landingUi.js teal set — white text 7.79:1 → hover / pressed */ --adv-teal-900: #064a42; /* new (*) */ --adv-teal-950: #04302b; /* new (*) */ /* --- Neutral scale ---------------------------------------------------------- 0–950. Semantic aliases below pin the key ones that already exist in prod. */ --adv-neutral-0: #ffffff; --adv-neutral-50: #f7f9fe; /* = landingUi.js --bg-soft / panelUi.js --bg (light) */ --adv-neutral-100: #eef1f8; /* = landingUi.js --line2 */ --adv-neutral-200: #e4e9f4; /* = landingUi.js --line / panelUi.js --line (light) */ --adv-neutral-300: #d2d9ea; /* new (*) */ --adv-neutral-400: #8a93a6; /* new (*) — "subtle": non-text / disabled / placeholder / icons ONLY (3.09:1, NOT body text) */ --adv-neutral-500: #5b6478; /* = landingUi.js --muted / panelUi.js --muted (light) — 5.93:1 on white */ --adv-neutral-600: #454e63; /* new (*) */ --adv-neutral-700: #333a4c; /* new (*) */ --adv-neutral-800: #222838; /* new (*) */ --adv-neutral-900: #101528; /* = landingUi.js --ink / panelUi.js --text (light) — 17.19:1 on bg-soft */ --adv-neutral-950: #0a0e1c; /* new (*) */ /* --- Dark surfaces (primitives, reused by [data-theme="dark"]) -------------- */ --adv-dark-bg: #0f1420; /* = panelUi.js --bg (dark) */ --adv-dark-card: #171e2e; /* = panelUi.js --card (dark) */ --adv-dark-sunken: #0d1220; /* = panelUi.js --input-bg/--code-bg (dark) */ --adv-dark-text: #e6ebf5; /* = panelUi.js --text (dark) — 15.39:1 */ --adv-dark-muted: #93a0bd; /* = panelUi.js --muted (dark) — 6.34:1 on card */ --adv-dark-line: #26304a; /* = panelUi.js --line (dark) */ /* --- Retired marketing accents (kept as primitives for reference ONLY) ------ Do NOT use in UI chrome. Documented so the migration knows what they map to. */ --adv-legacy-blue: #4f7dff; /* was landingUi.js --blue & panelUi.js --acc — RETIRED (white text 3.68:1 FAIL) */ --adv-legacy-violet: #a855f7; /* was landingUi.js --violet — RETIRED (white text 3.96:1 FAIL) */ /* --- Semantic hue primitives ------------------------------------------------ */ --adv-success-solid: #0f9d6c; /* = landingUi.js --green / panelUi.js --ok (light) — DECORATIVE only (white 3.47:1 FAIL) */ --adv-success-fg: #0b7a54; /* new (*) — white 5.35:1 / on success-bg 4.91:1 → AA */ --adv-success-bg: #e9f9f1; /* = panelUi.js --approved-bg */ --adv-warning-solid: #b7791f; /* = panelUi.js --warn (light) — DECORATIVE only */ --adv-warning-fg: #8a5a00; /* = panelUi.js --impbar-fg / connectorPageUi.js risk callout — white 5.93:1 / on warning-bg 5.56:1 → AA */ --adv-warning-bg: #fff7e6; /* = panelUi.js --pending-bg / --impbar-bg≈#fff7e6 / connectorPageUi.js #fff8e6 */ --adv-warning-line: #f0c36d; /* = panelUi.js --impbar-line / connectorPageUi.js risk callout */ --adv-danger-fg: #b23c3c; /* = chatUi.js danger — white 5.83:1 / on danger-bg 5.18:1 → AA */ --adv-danger-solid: #b23c3c; /* same; legacy #e0526a (landingUi --red / panelUi --err) is DECORATIVE only */ --adv-danger-legacy: #e0526a; /* = landingUi.js --red / panelUi.js --err (light) — DECORATIVE only (white 3.76:1 FAIL) */ --adv-danger-bg: #fdeef0; /* = panelUi.js --rejected-bg */ --adv-info-fg: #3563e0; /* = panelUi.js --type-fg≈#3563e0 — white 5.23:1 / on info-bg 4.71:1 → AA */ --adv-info-bg: #eef3ff; /* = panelUi.js --info-bg (light) */ /* --- Typography primitives -------------------------------------------------- */ --adv-font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* was system-ui in panelUi.js/chatUi.js; Manrope from landingUi.js now everywhere */ --adv-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ≈ panelUi.js/chatUi.js mono */ /* Type scale (Manrope, base 16px). Minimum size anywhere = 12px. */ --adv-font-display: 800 clamp(36px, 5vw, 56px)/1.08 var(--adv-font-sans); --adv-font-h1: 800 clamp(28px, 3.4vw, 40px)/1.15 var(--adv-font-sans); --adv-font-h2: 700 24px/1.25 var(--adv-font-sans); --adv-font-h3: 700 18px/1.35 var(--adv-font-sans); --adv-font-body-lg: 500 17px/1.6 var(--adv-font-sans); --adv-font-body: 400 15px/1.55 var(--adv-font-sans); /* = panelUi.js base 15px */ --adv-font-small: 500 13px/1.45 var(--adv-font-sans); --adv-font-micro: 700 12px/1.4 var(--adv-font-sans); /* uppercase +.04em applied in component */ /* Discrete sizes/weights (for when `font:` shorthand is inconvenient) */ --adv-text-display: clamp(36px, 5vw, 56px); --adv-text-h1: clamp(28px, 3.4vw, 40px); --adv-text-h2: 24px; --adv-text-h3: 18px; --adv-text-body-lg: 17px; --adv-text-body: 15px; --adv-text-small: 13px; --adv-text-micro: 12px; --adv-tracking-display: -0.025em; --adv-tracking-micro: 0.04em; --adv-weight-regular: 400; --adv-weight-medium: 500; --adv-weight-bold: 700; --adv-weight-black: 800; /* --- Spacing (4px base) ----------------------------------------------------- */ --adv-space-1: 4px; --adv-space-2: 8px; --adv-space-3: 12px; --adv-space-4: 16px; --adv-space-5: 24px; --adv-space-6: 32px; --adv-space-7: 48px; --adv-space-8: 64px; --adv-space-9: 96px; /* --- Radius ----------------------------------------------------------------- */ --adv-radius-sm: 8px; /* inputs, tags */ --adv-radius-md: 12px; /* buttons (non-pill), app cards */ --adv-radius-lg: 20px; /* marketing cards */ --adv-radius-pill: 999px; /* CTA, chips */ /* --- Shadow / elevation ----------------------------------------------------- */ --adv-shadow-1: 0 2px 10px rgba(16, 21, 40, .05); /* = panelUi.js --shadow */ --adv-shadow-2: 0 10px 30px rgba(16, 21, 40, .10); /* --- Motion ----------------------------------------------------------------- */ --adv-duration-fast: 120ms; --adv-duration-base: 200ms; --adv-duration-slow: 320ms; --adv-ease-standard: cubic-bezier(.2, 0, 0, 1); /* --- Layout ----------------------------------------------------------------- */ --adv-container: 1140px; /* = landingUi.js .wrap */ --adv-container-wide: 1320px; /* app-wide (proposal) */ /* Breakpoints are 640 / 960 / 1200. NOTE: CSS custom properties CANNOT be used inside @media queries, so these are documentation only — hard-code the px. */ --adv-bp-sm: 640px; --adv-bp-md: 960px; --adv-bp-lg: 1200px; /* =========================================================================== 2 · SEMANTIC ALIASES (LIGHT) — components use ONLY these =========================================================================== */ --adv-color-bg: var(--adv-neutral-0); /* page background */ --adv-color-bg-soft: var(--adv-neutral-50); /* subtle page sections */ --adv-color-surface: var(--adv-neutral-0); /* card surface */ --adv-color-surface-sunken: var(--adv-neutral-50); /* inputs, code, wells */ --adv-color-text: var(--adv-neutral-900); /* body text — 17.19:1 on bg-soft */ --adv-color-text-muted: var(--adv-neutral-500); /* secondary text — 5.93:1 on white */ --adv-color-text-subtle: var(--adv-neutral-400); /* disabled/placeholder/icons ONLY — 3.09:1 */ --adv-color-border: var(--adv-neutral-200); --adv-color-border-strong: var(--adv-neutral-300); --adv-color-primary: var(--adv-teal-700); /* buttons/links — white text 5.75:1 */ --adv-color-primary-hover: var(--adv-teal-800); /* hover/pressed — white text 7.79:1 */ --adv-color-on-primary: var(--adv-neutral-0); /* text/icon on primary */ --adv-color-brand: var(--adv-teal-500); /* brand mark / decorative fills ONLY */ --adv-color-link: var(--adv-teal-700); --adv-color-link-hover: var(--adv-teal-800); --adv-color-selection: var(--adv-teal-200); --adv-color-focus-ring: var(--adv-teal-700); /* Status families (fg = AA text, bg = tint, border = outline) */ --adv-color-success-fg: var(--adv-success-fg); --adv-color-success-bg: var(--adv-success-bg); --adv-color-success-border: #bfe9d5; --adv-color-warning-fg: var(--adv-warning-fg); --adv-color-warning-bg: var(--adv-warning-bg); --adv-color-warning-border: var(--adv-warning-line); --adv-color-danger-fg: var(--adv-danger-fg); --adv-color-danger-bg: var(--adv-danger-bg); --adv-color-danger-border: #f3c4cb; --adv-color-info-fg: var(--adv-info-fg); --adv-color-info-bg: var(--adv-info-bg); --adv-color-info-border: #c9d8ff; /* Focus ring (double ring: bg gap + colored ring) */ --adv-focus-ring: 0 0 0 3px var(--adv-color-bg), 0 0 0 5px var(--adv-color-focus-ring); /* Semantic shadows (re-pointed in dark) */ --adv-elevation-1: var(--adv-shadow-1); --adv-elevation-2: var(--adv-shadow-2); } /* ============================================================================= DARK THEME — set [data-theme="dark"] on (panelUi.js page() already does) Only re-points SEMANTIC ALIASES, so every component flips automatically. ============================================================================= */ [data-theme="dark"] { --adv-color-bg: var(--adv-dark-bg); /* #0f1420 */ --adv-color-bg-soft: var(--adv-dark-sunken); /* #0d1220 */ --adv-color-surface: var(--adv-dark-card); /* #171e2e */ --adv-color-surface-sunken: var(--adv-dark-sunken); /* #0d1220 */ --adv-color-text: var(--adv-dark-text); /* #e6ebf5 — 15.39:1 */ --adv-color-text-muted: var(--adv-dark-muted); /* #93a0bd — 6.34:1 on card */ --adv-color-text-subtle: #6b7793; --adv-color-border: var(--adv-dark-line); /* #26304a */ --adv-color-border-strong: #34405e; /* On a dark surface the brand teal-500 passes: #0f1420 text on #32bcad = 7.83:1 */ --adv-color-primary: var(--adv-teal-500); /* #32bcad */ --adv-color-primary-hover: var(--adv-teal-400); /* #5ccabd */ --adv-color-on-primary: var(--adv-dark-bg); /* #0f1420 — 7.83:1 on primary */ --adv-color-brand: var(--adv-teal-500); --adv-color-link: var(--adv-teal-400); /* #5ccabd — 8.43:1 on card */ --adv-color-link-hover: var(--adv-teal-300); --adv-color-selection: var(--adv-teal-800); --adv-color-focus-ring: var(--adv-teal-400); /* Status — brighter fg for dark, with existing panel tinted backgrounds */ --adv-color-success-fg: #2ecc71; /* = panelUi.js --ok (dark) — 7.92:1 on card / 6.64:1 on success-bg → AA */ --adv-color-success-bg: #15321f; --adv-color-success-border: #205437; --adv-color-warning-fg: #f1c40f; /* = panelUi.js --warn (dark) — 10.02:1 on card / 7.5:1 on warning-bg → AA */ --adv-color-warning-bg: #3a3417; --adv-color-warning-border: #5c5020; --adv-color-danger-fg: #ff7b8a; /* 6.7:1 on card / 6.3:1 on danger-bg → AA (as TEXT; NOT a button bg under white — see prototype .adv-btn--danger) */ --adv-color-danger-bg: #3a1a17; --adv-color-danger-border: #5e2a2a; --adv-color-info-fg: #8fb0ff; /* 7.79:1 on card / 6.5:1 on info-bg → AA */ --adv-color-info-bg: #1a2b4d; /* = panelUi.js --info-bg (dark) */ --adv-color-info-border: #2c4374; /* Shadows are weaker / effectively none on dark */ --adv-elevation-1: 0 1px 2px rgba(0, 0, 0, .4); --adv-elevation-2: 0 8px 24px rgba(0, 0, 0, .5); --adv-focus-ring: 0 0 0 3px var(--adv-color-bg), 0 0 0 5px var(--adv-color-focus-ring); } /* Reduced motion: zero out durations globally. */ @media (prefers-reduced-motion: reduce) { :root { --adv-duration-fast: 0ms; --adv-duration-base: 0ms; --adv-duration-slow: 0ms; } }