/* ============================================================ Ads Architect — Design tokens (Stack pastel system) ============================================================ Single source of truth. Consumed by : - index.html chrome (linked from ) - vanilla tool modules (Matrice, Kickoff, etc. — Phase 1+) - React components (via the typed exports in src/styles/tokens.ts) When you change a colour here, it propagates everywhere. The old inline :root in index.html was duplicated in 2 places and Bibly bypassed by hardcoded hex values in RoasAuditApp / BrandFinder — we are putting an end to that with Phase 1. Conventions : --bg / --fg / --surface neutrals --muted / --faint / --line opacity-laddered ink -- / ---soft colour + light-tint variant --p- phase semantic colours --s- status semantic colours --r- border radius scale --space- spacing scale (new) --shadow- elevation (new) --font- typography (new) ============================================================ */ :root { /* ─── Neutrals ─── */ --bg: #F7F6F5; /* base--light-100 */ --surface: #FFFFFF; /* lift--light */ --depth: #ECECEC; /* depth--light (Nerdstack exact) */ --fg: #231F23; /* base--dark-100 */ --muted: #231F23B3; /* base--dark-70 — bumped from 64 (0x99) to 70 (0xB3) in Phase 2.G to pass WCAG 2.1 AA contrast 4.5:1 on the default #F7F6F5 background (was 4.22). */ --faint: #231F2333; /* base--dark-20 */ --line: #231F231F; /* base--dark-12 */ --line-soft: #231F230F; /* base--dark-6 */ /* ─── Ink opacity ladder ─── (replaces hardcoded #231f23xx alphas) */ --ink-100: #231F23; --ink-84: #231F23D6; --ink-76: #231F23C2; --ink-64: #231F2399; /* same as --muted */ --ink-48: #231F237A; --ink-32: #231F2352; --ink-20: #231F2333; /* same as --faint */ --ink-16: #231F2329; /* soft border (used widely in audit flow) */ --ink-12: #231F231F; /* same as --line */ --ink-8: #231F2314; /* faint fill / hairline */ --ink-6: #231F230F; /* same as --line-soft */ /* ─── Stack pastel palette ─── */ --orchid: #CEBFFA; /* qubit orchid */ --orchid-soft: #E8E0FC; --coral: #ED7472; /* core coral / error */ --coral-soft: #F9CFCE; --mint: #CCFDCF; /* syntax mint / success */ --mint-soft: #E5FEE7; --sky: #D7E9FF; /* packet sky / info */ --sky-soft: #ECF4FF; --sand: #F4E7C7; /* cache sand / warning */ --sand-soft: #FAF3DF; --peach: #FFE1D6; /* latency peach */ --peach-soft: #FFF0E8; /* ─── Phase colours ─── */ --p-test: #5A4ECC; /* deeper orchid for text */ --p-test-soft: var(--orchid-soft); --p-test-edge: #B8A6F5; --p-cold: #2A6B30; /* deeper mint for text */ --p-cold-soft: var(--mint-soft); --p-cold-edge: #8FE095; --p-warm: #C53D2C; /* deeper coral / peach for text */ --p-warm-soft: var(--peach-soft); --p-warm-edge: #FFB89E; --p-ret: #8A6B1A; /* deeper sand for text */ --p-ret-soft: var(--sand-soft); --p-ret-edge: #E0C66F; /* Texte d'accent positif/négatif posé sur une SURFACE thème-aware (var(--surface)/--depth, foncée en dark). Contrairement à --p-cold/--p-warm (qui restent foncés, OK sur pastel clair), ceux-ci s'éclaircissent en dark pour rester lisibles sur fond foncé. */ --pos: #2A6B30; --neg: #C53D2C; --warn: #8A6B1A; /* ─── Status semantic colours ─── */ --s-won: #2A6B30; --s-won-soft: var(--mint-soft); --s-won-edge: #8FE095; --s-lost: #C53D2C; --s-lost-soft: var(--coral-soft); --s-lost-edge: #F2A6A4; --s-incon: #8A6B1A; --s-incon-soft: var(--sand-soft); --s-incon-edge: #E0C66F; --s-live: #2D5DA8; --s-live-soft: var(--sky-soft); --s-live-edge: #A6CAF7; --s-plan: #5A4ECC; --s-plan-soft: var(--orchid-soft); --s-plan-edge: #B8A6F5; /* ─── Radius ─── */ --r-sm: 4px; --r-md: 8px; --r-lg: 12px; /* ─── Spacing scale (new — to replace ad-hoc px values) ─── */ --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; /* ─── Typography ─── */ --font-body: 'StackSans text Variable', system-ui, -apple-system, sans-serif; --font-headline: 'StackSans headline Variable', system-ui, -apple-system, sans-serif; --font-mono: 'Fragment Mono', 'SF Mono', 'Menlo', monospace; --text-xs: 0.7rem; --text-sm: 0.78rem; --text-base: 0.85rem; --text-lg: 1rem; --text-xl: 1.2rem; --text-2xl: 1.4rem; --text-3xl: 1.7rem; /* ─── Elevation (subtle, in keeping with Stack flatness) ─── */ --shadow-sm: 0 1px 2px rgba(35, 31, 35, 0.05); --shadow-md: 0 4px 12px -2px rgba(35, 31, 35, 0.10); --shadow-lg: 0 24px 64px -16px rgba(35, 31, 35, 0.35); /* ─── Motion ─── */ --motion-fast: 0.12s; --motion-med: 0.18s; --motion-slow: 0.25s; --easing-default: cubic-bezier(0.2, 0.6, 0.2, 1); } /* ════════════════════════════════════════════════════════════════════ DARK MODE (v1 progressif) — activé via par le toggle du topbar (persisté en localStorage aa_theme). On surcharge les NEUTRES + l'échelle d'encre (texte/bordures) + ombres. Les couleurs pastel/phase/statut restent (accents lisibles sur sombre). Les écrans très « React » et les mockups pub (volontairement blancs — ils imitent Facebook/Google) gardent leurs couleurs codées en dur ; on affinera progressivement. ════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; --bg: #1A171C; --surface: #241F27; --depth: #2E2932; --fg: #F3F0F5; --muted: #F3F0F5B3; --faint: #F3F0F533; --line: #F3F0F524; --line-soft: #F3F0F514; --ink-100: #F3F0F5; --ink-84: #F3F0F5D6; --ink-76: #F3F0F5C2; --ink-64: #F3F0F5B3; --ink-48: #F3F0F58A; --ink-32: #F3F0F560; --ink-20: #F3F0F53D; --ink-16: #F3F0F52E; --ink-12: #F3F0F524; --ink-8: #F3F0F51A; --ink-6: #F3F0F514; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.55); --shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.75); /* Accents positif/négatif/warning éclaircis pour rester lisibles sur fond foncé. */ --pos: #6FD17F; --neg: #F2937D; --warn: #E0C66F; }