/* ========================================================================= AbokiWise Design System — tokens.css The contract. Components reference semantic/surface tokens only. Brand primitives are the raw palette; surface+semantic flip per theme. Themes: :root = light (default). [data-theme="dark"] = dark. Set on or any ancestor. Contrast target: WCAG AA (4.5:1 body) in both modes. ========================================================================= */ /* ----- Brand primitives (fixed, rarely referenced directly) -------------- */ :root { --brand-terracotta: #c1440e; --brand-terracotta-hover: #a8380a; --brand-amber: #d4850a; --brand-deep-brown: #2d1810; --brand-dark-roast: #1a0a05; --brand-warm-sand: #f5e6c8; --brand-cream: #fdf8f0; --success: #2e7d32; --error: #c62828; --warning: #b45309; --info: #1e6b8a; } /* ----- Light theme (default) --------------------------------------------- */ :root, [data-theme="light"] { color-scheme: light; /* accent */ --accent: var(--brand-terracotta); --accent-hover: var(--brand-terracotta-hover); --accent-contrast: var(--brand-cream); --accent-glow: rgba(193, 68, 14, 0.22); /* Amber is a dark-mode accent: --brand-amber is 2.77:1 on cream, so it fails AA as text and as a button fill under white labels. Light mode gets a darkened amber of the same hue (6.51:1 on cream, 4.65:1 on the most-tinted badge, 6.88:1 under a white label). Dark mode keeps the bright primitive. */ --accent-secondary: #7d5104; --accent-secondary-contrast: #ffffff; /* on #7d5104 -> 6.88:1 */ /* --accent as *text* is only 4.24:1 on the light canvas and 3.76:1 on the dark one. These are the existing hover primitives, which clear AA in both (5.37 / 5.06). --accent itself is unchanged: as a button fill under white it already passes, and every fill would shift if it moved. */ --accent-text: var(--brand-terracotta-hover); /* Display copy (hero/CTA/stats subtitles) was painted with the raw --brand-warm-sand primitive, which is fixed across themes and so sat at 1.23:1 on the light canvas. Dark keeps warm sand exactly; light drops to the semantic secondary. */ --text-display-secondary: var(--text-secondary); /* mix-blend-mode: screen drops an image's dark pixels — it only works over a dark surface. On the light canvas it blows the step illustrations out to white, so light mode composites them normally. */ --img-blend: normal; /* Hero backdrop scrim (body::before). The dark-roast scrim at .45 opacity was applied in BOTH themes, dragging the light canvas to #978d86 and putting secondary/muted text at 2.2-2.6:1. Light mode gets a cream scrim at low opacity; dark mode keeps the original values verbatim. */ --hero-scrim-from: rgba(253, 248, 240, 0.55); --hero-scrim-to: rgba(253, 248, 240, 0.92); --hero-scrim-opacity: 0.10; /* text */ --text-primary: #2d1810; --text-secondary: #6b4434; --text-muted: #6e5240; --text-disabled: #b89e91; --text-on-accent: var(--brand-cream); --text-on-surface: #2d1810; --text-on-saturated: #ffffff; /* borders */ --border-default: rgba(193, 68, 14, 0.18); --border-strong: rgba(193, 68, 14, 0.40); --border-accent: var(--brand-terracotta); /* surfaces */ --bg-canvas: var(--brand-cream); --bg-surface: #ffffff; --bg-elevated: #ffffff; --bg-sunken: var(--brand-warm-sand); --bg-overlay: rgba(45, 24, 16, 0.45); /* state (bg + fg pairs) */ --state-success-bg: rgba(46, 125, 50, 0.12); --state-success-fg: #256628; --state-error-bg: rgba(198, 40, 40, 0.12); --state-error-fg: #a01f1f; --state-warning-bg: rgba(180, 83, 9, 0.14); --state-warning-fg: #92400e; --state-info-bg: rgba(30, 107, 138, 0.12); --state-info-fg: #1e6b8a; /* shadow (warm-tinted) */ --shadow-sm: 0 2px 4px rgba(45, 24, 16, 0.06); --shadow-md: 0 4px 16px rgba(45, 24, 16, 0.10); --shadow-lg: 0 8px 32px rgba(45, 24, 16, 0.14); --shadow-glow: 0 0 0 3px var(--accent-glow); } /* ----- Dark theme -------------------------------------------------------- */ [data-theme="dark"] { color-scheme: dark; --accent: var(--brand-terracotta); --accent-hover: #e05612; --accent-contrast: var(--brand-cream); --accent-glow: rgba(193, 68, 14, 0.35); --accent-secondary: var(--brand-amber); --accent-text: #e5651f; /* #e05612 was 4.36:1 on the tinted plan/skill chips */ --text-display-secondary: var(--brand-warm-sand); --img-blend: screen; --accent-secondary-contrast: var(--brand-deep-brown); /* white on #d4850a is 2.93:1; deep brown is 5.73:1 */ --hero-scrim-from: rgba(26, 10, 5, 0.35); --hero-scrim-to: rgba(26, 10, 5, 0.9); --hero-scrim-opacity: 0.45; --text-primary: var(--brand-cream); --text-secondary: #c4b0a5; --text-muted: #b89e91; --text-disabled: #6b554a; --text-on-accent: var(--brand-cream); --text-on-surface: var(--brand-cream); --text-on-saturated: #ffffff; --border-default: rgba(193, 68, 14, 0.22); --border-strong: rgba(193, 68, 14, 0.50); --border-accent: var(--brand-terracotta); --bg-canvas: var(--brand-dark-roast); --bg-surface: #241108; --bg-elevated: var(--brand-deep-brown); --bg-sunken: #120705; --bg-overlay: rgba(0, 0, 0, 0.65); --state-success-bg: rgba(46, 125, 50, 0.18); --state-success-fg: #6bbf73; --state-error-bg: rgba(198, 40, 40, 0.20); --state-error-fg: #f08a8a; --state-warning-bg: rgba(180, 83, 9, 0.20); --state-warning-fg: #f0b868; --state-info-bg: rgba(30, 107, 138, 0.20); --state-info-fg: #6fb3cc; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.60); --shadow-glow: 0 0 0 3px var(--accent-glow); } /* ----- Typography -------------------------------------------------------- */ :root { --font-heading: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* type scale (1.250 ratio) */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.375rem; /* 22 */ --text-2xl: 1.75rem; /* 28 */ --text-3xl: 2.25rem; /* 36 */ --text-display: 3rem; /* 48 */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.7; --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; } /* ----- Spacing ----------------------------------------------------------- */ :root { --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ } /* ----- Radius ------------------------------------------------------------ */ :root { --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; } /* ----- Motion ------------------------------------------------------------ */ :root { --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 0, 0, 1); } /* ----- Z-index ----------------------------------------------------------- */ :root { --z-base: 1; --z-elevated: 10; --z-sticky: 100; --z-overlay: 800; --z-modal: 900; --z-toast: 1000; } /* ----- Focus ring -------------------------------------------------------- */ :root { --focus-ring: 0 0 0 3px var(--accent-glow); } @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-slow: 0ms; } }