/* ============================================================ PRODUCT.AI DESIGN TOKENS v1.0 ============================================================ Shared token authority for all Product.ai dashboards. Consumed by: CEO Cortex (Ops/Dashboards/) and Team Cortex (cortex/dashboard/) Canonical source: Ops/_ Design System/design-tokens.css Spec: Ops/_ Design System/DESIGN-SYSTEM.md Import via: @import url('design-tokens.css'); Override per-system via :root {} block after import. Color Philosophy (drivers/product/productai-brand-color-driver.md): - Status owns color: verified green, info sky, progress amber (marks only), caution orange, error red, deal pink - System accent: Product.ai violet (#8B5CF6, violet-500) for current state, progress - Everything else: Tailwind zinc grayscale - Pillar/track badges: semantic color per pillar (SimplyCodes wears green, Product.ai wears violet) Fonts (productai-brand-typography-driver §3.5): Plus Jakarta Sans for all text and UI; Archivo for page titles and section eyebrows only; Roboto Mono for receipts only (IDs, codes, timestamps, metadata lines, paths, raw output). Brand alignment 2026-09-29 (AMD-017 overrules cortex-dashboard-driver S-5). ============================================================ */ :root { /* ---- Background layers ---- */ --bg-base: #09090B; /* zinc-950 */ --bg-raised: #101013; /* zinc-925 */ --bg-overlay: #18181B; /* zinc-900 */ --bg-sunken: #101013; /* zinc-925 */ /* ---- Surface layers (cards, inputs, interactive) ---- */ --surface-primary: #161619; --surface-hover: #1c1c20; --surface-active: #222228; --surface-input: #1a1a1e; --surface-muted: #333338; /* ---- Borders ---- */ --border-subtle: rgba(255,255,255,0.06); --border-default: rgba(255,255,255,0.09); --border-strong: rgba(255,255,255,0.13); --border-accent: rgba(139,92,246,0.4); /* ---- Text hierarchy (Tailwind zinc, 2026-09-29) ---- All four levels pass WCAG AA (4.5:1) against --bg-base (#09090B): primary zinc-100 18.10:1 · secondary zinc-300 13.46:1 · tertiary zinc-400 7.76:1 · quaternary zinc-450 5.74:1 (4.56:1 on --surface-active, the darkest pairing). Was #ececf0 / #c0c0cc / #9a9aa6 / #8a8a96. */ --text-primary: #F4F4F5; --text-secondary: #D4D4D8; --text-tertiary: #A1A1AA; --text-quaternary: #898992; --text-inverted: #09090B; /* ---- Accent (Product.ai violet) ---- Base is violet-500 (#8B5CF6) — the brand color, per drivers/product/productai-brand-color-driver.md §3.3 Appendix A. Hover is violet-450 (#956FF8), one tint step lighter. Aligned 2026-08-27: the base was #7c3aed (violet-600) and #8b5cf6 sat in the hover slot, which put the brand's base color one rung off its own name. The alpha companions are the same base at 15/8/10%. */ --accent: #8b5cf6; --accent-hover: #956ff8; --accent-muted: rgba(139,92,246,0.15); --accent-subtle: rgba(139,92,246,0.08); --accent-dim: rgba(139,92,246,0.10); --text-on-accent: #ffffff; /* text and icons on a solid accent fill (the primary CTA); never on a tint */ /* ---- Main button (brand-color driver Axiom 6, btn-brand) ---- One per page. Fill violet-300 -> hover violet-450 -> pressed violet-500, BLACK label at every state (9.56 / 5.91 / 4.96:1). White on these fills fails AA at every state, so it is retired. */ --btn-brand-bg: #B5A2FE; --btn-brand-bg-hover: #956FF8; --btn-brand-bg-pressed: #8B5CF6; --btn-brand-ink: #000000; /* ---- Semantic status (brand-color driver §3.3, the closed six) ---- Contrast on --bg-base: green 7.86 · blue 9.29 · amber 11.92 · orange 8.79 · red 5.29 · pink 7.51 · purple 9.06 (all >= 4.5:1). Amber is for marks (dots, bars, icons), not running text. Purple is violet-300, a non-status highlight kept for existing consumers. */ --status-green: #02BB64; /* verified — sc-green-600 */ --status-green-muted: rgba(2,187,100,0.12); --status-yellow: #FBBF24; /* progress — amber-400, marks only */ --status-yellow-muted: rgba(251,191,36,0.12); --status-orange: #FB923C; /* caution — orange-400 */ --status-orange-muted: rgba(251,146,60,0.12); --status-red: #EF4444; /* error — red-500 */ --status-red-muted: rgba(239,68,68,0.12); --status-blue: #38BDF8; /* info — sky-400 */ --status-blue-muted: rgba(56,189,248,0.12); --status-pink: #F472B6; /* deal — pink-400 */ --status-pink-muted: rgba(244,114,182,0.12); --status-purple: #B5A2FE; /* violet-300 */ --status-purple-muted: rgba(181,162,254,0.12); /* ---- Pillar colors ---- */ --pillar-brand: #f472b6; --pillar-brand-muted: rgba(244,114,182,.10); --pillar-sc: #02BB64; --pillar-sc-muted: rgba(2,187,100,.10); /* SimplyCodes wears green */ --pillar-pai: #8B5CF6; --pillar-pai-muted: rgba(139,92,246,.10); /* Product.ai wears violet */ --pillar-kops: #2dd4bf; --pillar-kops-muted: rgba(45,212,191,.10); --pillar-hr: #94a3b8; --pillar-hr-muted: rgba(148,163,184,.10); --pillar-glass: #34d399; --pillar-glass-muted: rgba(52,211,153,.10); --pillar-rev: #fbbf24; --pillar-rev-muted: rgba(251,191,36,.10); /* ---- Typography ---- */ /* Loaded per page via the Google Fonts : https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap --font-sans: all text, UI, tags, labels, pills, buttons. --font-display: page titles and section eyebrows only (typography §3.5). --font-mono: receipts only — IDs, codes, timestamps, metadata lines, paths. */ --font-sans: 'Plus Jakarta Sans', -apple-system, "Segoe UI", sans-serif; --font-display: 'Archivo', "Helvetica Neue", Arial, sans-serif; --font-mono: 'Roboto Mono', ui-monospace, "SF Mono", Menlo, monospace; /* ---- Font size scale (tokens) ---- Single source of truth for all dashboard typography. Bump --fs-base to scale everything proportionally. Hardcoded font-size values in dashboard files are blocked by dashboard-css-guard (Rule 7). */ --fs-base: 16px; /* Body default. Bump this to scale everything. Was 13px pre-Apr-22, 15px Apr-22, 16px Apr-23. */ --fs-label: calc(var(--fs-base) - 4px); /* 12px — uppercase labels (letter-spacing required). */ --fs-xs: calc(var(--fs-base) - 3px); /* 13px — readability floor for body text. */ --fs-sm: calc(var(--fs-base) - 2px); /* 14px — secondary body, pills, meta. */ --fs-md: calc(var(--fs-base) - 1px); /* 15px — card titles. */ --fs-lg: var(--fs-base); /* 16px — body default. */ --fs-xl: calc(var(--fs-base) + 3px); /* 19px — subsection titles. */ --fs-2xl: calc(var(--fs-base) + 5px); /* 21px — section titles. */ --fs-3xl: calc(var(--fs-base) + 13px); /* 29px — page titles. */ /* Semantic alias — use in place of --fs-lg when intent is "body default" */ --fs-body: var(--fs-lg); /* Body default. Clearer intent than --fs-lg. */ /* Display sizes (stat values, KPIs, headings — scale with base) */ --fs-stat: calc(var(--fs-base) + 7px); /* 22px — stat strip values. */ --fs-stat-lg: calc(var(--fs-base) + 9px); /* 24px — stat card values. */ --fs-section: calc(var(--fs-base) + 11px); /* 26px — between section and page titles. */ --fs-heading: calc(var(--fs-base) + 17px); /* 32px — prominent heading. */ --fs-heading-lg: calc(var(--fs-base) + 21px); /* 36px — large heading. */ --fs-display: calc(var(--fs-base) + 27px); /* 42px — KPI hero numbers. */ /* Fixed sizes (decorative, not body text — do NOT scale with base) */ --fs-micro: 8px; /* Micro decorative text. */ --fs-mini: 9px; /* Mini decorative text, small indicators. */ --fs-2xs: 10px; /* Small badges, overdue tags. Below readability floor. */ --fs-avatar: 7px; /* Avatar initials in tiny containers. */ /* ---- Spacing (4px grid) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ---- Radius ---- */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; /* ---- Shadows ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 8px 24px rgba(0,0,0,0.5); --shadow-tooltip: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06); /* ---- Transitions ---- */ --transition-fast: 120ms ease-out; --transition-normal: 180ms ease-out; --transition-slow: 280ms ease-out; /* transitions.dev — shared motion tokens, tuned down for dense ops UI */ --dropdown-open-dur: 180ms; --dropdown-close-dur: 120ms; --dropdown-pre-scale: 0.97; --dropdown-closing-scale: 0.99; --dropdown-ease: cubic-bezier(0.22, 1, 0.36, 1); --progress-fill-dur: 520ms; --progress-fill-ease: cubic-bezier(0.22, 1, 0.36, 1); --panel-open-dur: 260ms; --panel-close-dur: 180ms; --panel-translate-y: 14px; --panel-blur: 2px; --panel-ease: cubic-bezier(0.22, 1, 0.36, 1); --check-opacity-dur: 420ms; --check-rotate-dur: 420ms; --check-rotate-from: 60deg; --check-bob-dur: 360ms; --check-y-amount: 10px; --check-blur-dur: 360ms; --check-blur-from: 4px; --check-path-dur: 420ms; --check-path-delay: 40ms; --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1); --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1); --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1); --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1); }