/* 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 <html data-theme="light"> 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:#4A6A96; --chart-ring-hi:#E8A33D;
  --chart-tick:#7E9AC4; --chart-tick-major:#D9C9A0;
  --zodiac-outer:#0A1220; --zodiac-inner:#182740;
  --house-line:#54749F;
  --aspect-line:rgba(232,163,61,0.55);
  --aspect-line-hot:rgba(232,163,61,0.9);
  --aspect-line-minor:rgba(232,163,61,0.3);

  --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;

  /* ASTROLOGY IDENTITY — cool indigo, not the empire tan/gold.
     The --amber-* names are kept for compatibility with existing rules, but the
     ramp now resolves to indigo so no component can leak gold back in. */
  --amber-900:#EEF0FA; --amber-700:#6A61B5; --amber-600:#5A50A8;
  --amber-500:#4A3F9E; --amber-400:#3A3180; --amber-300:#2C2563;

  --copper-900:#FBEAE4; --copper-600:#9E4426; --copper-500:#8E3520; --copper-400:#6B2918;

  --chart-ring:#8C93AE; --chart-ring-hi:#4A3F9E;
  --chart-tick:#A6ACC4; --chart-tick-major:#5B6086;
  --zodiac-outer:#FFFFFF; --zodiac-inner:#EDF0F8;
  --house-line:#A8AEC6;
  --aspect-line:rgba(74,63,158,0.50);
  --aspect-line-hot:rgba(74,63,158,0.90);
  --aspect-line-minor:rgba(74,63,158,0.30);

  --shadow-1:0 1px 2px rgba(20,24,60,0.08);
  --shadow-2:0 4px 12px rgba(20,24,60,0.10);
  --shadow-3:0 12px 32px rgba(20,24,60,0.14),0 0 0 1px rgba(74,63,158,0.10);

  --bg-page:#F5F6FA;             --bg-app:#EEF0F7;
  --bg-panel:#FBFCFE;            --bg-elevated:#FFFFFF;
  --bg-row-hover:#E9ECF6;        --bg-row-selected:#DFE4F3;
  --bg-input:#FFFFFF;           --bg-button:#E4E8F4;
  --bg-button-hover:#D5DBEC;    --bg-button-primary:#4A3F9E;
  --bg-button-primary-hover:#3A3180;

  --fg-primary:#12142C;          --fg-secondary:#2B2E52;
  --fg-tertiary:#5B6086;         --fg-muted:#7C82A6;
  --fg-disabled:#A8AEC6;         --fg-on-primary:#FFFFFF;
  --fg-accent:#4A3F9E;           --fg-accent-hover:#3A3180;
  --fg-positive:var(--verdict-positive);
  --fg-warning:#8E5A12;          --fg-error:var(--verdict-error);
  --fg-info:var(--verdict-info);

  --border-subtle:#DFE2EC;       --border-default:#C3C9DC;
  --border-strong:#8C93AE;       --border-focus:#4A3F9E;

  --selection-bg:#DFE4F3;        --selection-fg:#12142C;
  --focus-ring:0 0 0 2px #4A3F9E;
}