/* ASTROLOGY APP — DESIGN TOKENS v1.0 | ux-designer | 2026-09-19 See DESIGN-SYSTEM.md §1-§9. Import once at app root. Default = dark. Set for parchment theme. NEVER use raw palette in components — use semantic tokens. */ :root { --ink-1000:#050810; --ink-950:#0A1020; --ink-900:#0E1726; --ink-850:#14202E; --ink-800:#1B2A3D; --ink-700:#243450; --ink-600:#2F4263; --ink-500:#3F5575; --ink-400:#5A7299; --ink-300:#7C92B5; --parchment-100:#F2E5C8; --parchment-200:#DAC9A5; --parchment-300:#B8A57F; --parchment-400:#8C7A55; --parchment-500:#5C5037; --amber-900:#3D2807; --amber-700:#7A4F12; --amber-600:#B07A1F; --amber-500:#E8A33D; --amber-400:#F0B858; --amber-300:#F7CB7A; --copper-900:#3D1B0E; --copper-600:#8E4520; --copper-500:#C76B3A; --copper-400:#D8825A; --verdict-positive:#5BA679; --verdict-warning:#E8A33D; --verdict-error:#C76B3A; --verdict-info:#6B8FB8; --fire:#D8553A; --fire-soft:#E07A65; --earth:#6B8E3D; --earth-soft:#94B265; --air:#C9A23F; --air-soft:#E0BD6B; --water:#3F75B8; --water-soft:#6B96CC; --chart-ring:#1B2A3D; --chart-ring-hi:#E8A33D; --chart-tick:#5A7299; --chart-tick-major:#B8A57F; --zodiac-outer:#050810; --zodiac-inner:#0E1726; --house-line:#2F4263; --aspect-line:rgba(232,163,61,0.45); --aspect-line-hot:rgba(232,163,61,0.85); --aspect-line-minor:rgba(232,163,61,0.25); --font-display:"Fraunces","GT Sectra","Source Serif Pro",Georgia,serif; --font-ui:"Inter","Söhne",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-mono:"JetBrains Mono","Berkeley Mono","SF Mono",ui-monospace,monospace; --font-glyph:"Noto Sans Symbols 2","Symbola","Apple Symbols","Segoe UI Symbol",sans-serif; --features-ui:"ss01","cv11"; --features-data:"tnum","lnum","zero"; --features-disp:"ss01","ss02"; }:root { --fs-display-xl:3.5rem; --fs-display-lg:2.5rem; --fs-display-md:1.75rem; --fs-heading-lg:1.375rem;--fs-heading-md:1.125rem; --fs-heading-sm:0.9375rem; --fs-body:0.875rem; --fs-body-sm:0.8125rem; --fs-caption:0.75rem; --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.5; --lh-relaxed:1.65; --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.06em; --tracking-caps:0.12em; --w-regular:400; --w-medium:500; --w-semibold:600; --w-bold:700; --sp-0:0; --sp-1:0.25rem; --sp-2:0.5rem; --sp-3:0.75rem; --sp-4:1rem; --sp-5:1.25rem; --sp-6:1.5rem; --sp-8:2rem; --sp-10:2.5rem; --sp-12:3rem; --sp-16:4rem; --sp-20:5rem; --sp-24:6rem; --sp-control-y:var(--sp-2); --sp-control-x:var(--sp-4); --sp-card:var(--sp-6); --sp-page:var(--sp-8); --sp-section:var(--sp-12); --r-none:0; --r-sm:2px; --r-md:4px; --r-lg:6px; --r-pill:999px; --shadow-1:0 1px 0 rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.3); --shadow-2:0 1px 0 rgba(0,0,0,0.4),0 4px 12px rgba(0,0,0,0.4); --shadow-3:0 1px 0 rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.5),0 0 0 1px rgba(232,163,61,0.06); --ease-out:cubic-bezier(0.2,0,0,1); --ease-in:cubic-bezier(0.4,0,1,1); --ease-inout:cubic-bezier(0.4,0,0.2,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms; --z-base:0; --z-raised:10; --z-dropdown:100; --z-modal:1000; --z-toast:2000; --z-tooltip:3000; --bg-page:var(--ink-1000); --bg-app:var(--ink-950); --bg-panel:var(--ink-900); --bg-elevated:var(--ink-850); --bg-row-hover:var(--ink-800); --bg-row-selected:var(--ink-700); --bg-input:var(--ink-1000); --bg-button:var(--ink-700); --bg-button-hover:var(--ink-600); --bg-button-primary:var(--amber-500); --bg-button-primary-hover:var(--amber-400); --fg-primary:var(--parchment-100); --fg-secondary:var(--parchment-200); --fg-tertiary:var(--parchment-300); --fg-muted:var(--parchment-400); --fg-disabled:var(--ink-300); --fg-on-primary:var(--ink-1000); --fg-accent:var(--amber-500); --fg-accent-hover:var(--amber-400); --fg-positive:var(--verdict-positive); --fg-warning:var(--verdict-warning); --fg-error:var(--verdict-error); --fg-info:var(--verdict-info); --border-subtle:var(--ink-400); --border-default:var(--ink-500); --border-strong:var(--ink-600); --border-focus:var(--amber-500); --selection-bg:var(--amber-900); --selection-fg:var(--parchment-100); --focus-ring:0 0 0 2px var(--amber-500); } [data-theme="light"] { --fire:#B83C2E; --fire-soft:#C75A44; --earth:#4F7028; --earth-soft:#6B8A3D; --air:#8B6F1C; --air-soft:#A6883A; --water:#2A5C9A; --water-soft:#4A77B0; --verdict-positive:#3F7A57; --verdict-error:#A8421A; --verdict-info:#3F6B96; --amber-900:#FAF1DE; --amber-700:#C68B22; --amber-600:#A07015; --amber-500:#8A6012; --amber-400:#6F4D0E; --amber-300:#553B0A; --copper-900:#FBE8DD; --copper-600:#993D1E; --copper-500:#8E3520; --copper-400:#6B2918; --chart-ring:#B8A57F; --chart-ring-hi:#8A6012; --chart-tick:#8C7A55; --chart-tick-major:#5C5037; --zodiac-outer:#FAF5E8; --zodiac-inner:#F4ECDA; --house-line:#B8A57F; --aspect-line:rgba(138,96,18,0.45); --aspect-line-hot:rgba(138,96,18,0.85); --aspect-line-minor:rgba(138,96,18,0.25); --shadow-1:0 1px 2px rgba(60,40,10,0.08); --shadow-2:0 4px 12px rgba(60,40,10,0.10); --shadow-3:0 12px 32px rgba(60,40,10,0.14),0 0 0 1px rgba(138,96,18,0.10); --bg-page:#FAF5E8; --bg-app:#F4ECDA; --bg-panel:#FDF8EC; --bg-elevated:#FFFFFF; --bg-row-hover:#F0E6CC; --bg-row-selected:#E8DBB8; --bg-input:#FDF8EC; --bg-button:#E8DBB8; --bg-button-hover:#D9C99A; --bg-button-primary:#8A6012; --bg-button-primary-hover:#6F4D0E; --fg-primary:#0A1020; --fg-secondary:#1B2A3D; --fg-tertiary:#3F5575; --fg-muted:#5C5037; --fg-disabled:#B8A57F; --fg-on-primary:#FAF5E8; --fg-accent:#8A6012; --fg-accent-hover:#6F4D0E; --fg-positive:var(--verdict-positive); --fg-warning:#8A6012; --fg-error:var(--verdict-error); --fg-info:var(--verdict-info); --border-subtle:#D9C99A; --border-default:#B8A57F; --border-strong:#8C7A55; --border-focus:#8A6012; --selection-bg:#E8DBB8; --selection-fg:#0A1020; --focus-ring:0 0 0 2px #8A6012; }