/* ============================================================
   LUMIOTAX — Design Tokens (Single Source of Truth)
   A premium, editorial, fintech aesthetic. Not templated.
   Palette: Midnight ink + Jade accent + Amber signal.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- Brand core ---- */
  --ink-900: #0B0E14;   /* near-black midnight */
  --ink-800: #11161F;
  --ink-700: #1A212E;
  --ink-600: #28323F;
  --ink-500: #3B4757;
  --ink-400: #5A6678;
  --ink-300: #8A95A6;
  --ink-200: #C2CAD6;
  --ink-100: #E6EAF0;
  --ink-50:  #F4F6FA;

  /* ---- Jade (primary accent) ---- */
  --jade-700: #0A8C80;
  --jade-600: #0FB5A6;   /* signature */
  --jade-500: #1ED3C2;
  --jade-400: #5CE6D8;
  --jade-100: #D6F7F3;
  --jade-glow: rgba(15, 181, 166, 0.35);

  /* ---- Amber (secondary signal / savings highlight) ---- */
  --amber-600: #E0962B;
  --amber-500: #F4B23E;
  --amber-400: #FBCB6E;
  --amber-100: #FCEFD2;

  /* ---- Semantic ---- */
  --good: #16A34A;
  --good-bg: #DCFCE7;
  --warn: #D97706;
  --warn-bg: #FEF3C7;
  --bad: #DC2626;
  --bad-bg: #FEE2E2;
  --info: #2563EB;
  --info-bg: #DBEAFE;

  /* ---- Surfaces (light theme defaults) — tinted, not pure white ---- */
  --bg:        #EAF1F2;
  --bg-soft:   #E0EAEC;
  --surface:   #FFFFFF;
  --surface-2: #F1F6F7;
  --border:    #D9E3E5;
  --border-strong: #C4D2D5;
  --text:      #0F1820;
  --text-soft: #46555F;
  --text-faint:#74858E;
  --on-accent: #04221F;
  /* page gradient wash (soft jade → amber, very low opacity) */
  --page-wash: radial-gradient(1100px 620px at 12% -8%, rgba(15,181,166,0.10), transparent 60%),
               radial-gradient(900px 520px at 100% 0%, rgba(244,178,62,0.08), transparent 55%);

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", monospace;

  --fs-xs:  0.75rem;
  --fs-sm:  0.875rem;
  --fs-base:1rem;
  --fs-md:  1.125rem;
  --fs-lg:  1.375rem;
  --fs-xl:  1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;
  --fs-4xl: 4rem;
  --fs-5xl: 5.25rem;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-base: 1.6;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Shadows (soft, layered) ---- */
  --shadow-sm: 0 1px 2px rgba(11,14,20,0.06), 0 1px 3px rgba(11,14,20,0.05);
  --shadow-md: 0 6px 16px rgba(11,14,20,0.08), 0 2px 4px rgba(11,14,20,0.04);
  --shadow-lg: 0 18px 48px rgba(11,14,20,0.14), 0 6px 14px rgba(11,14,20,0.06);
  --shadow-glow: 0 0 0 1px var(--jade-glow), 0 12px 40px var(--jade-glow);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-narrow: 760px;
  --nav-h: 68px;
}

/* ============================================================
   DARK THEME
   ============================================================ */
[data-theme="dark"] {
  --bg:        #0A1014;
  --bg-soft:   #0E161C;
  --surface:   #121C24;
  --surface-2: #18242D;
  --border:    #243440;
  --border-strong: #34495A;
  --text:      #E6EEF0;
  --text-soft: #AEBEC7;
  --text-faint:#7B8E9A;
  --on-accent: #04221F;
  --page-wash: radial-gradient(1100px 620px at 12% -8%, rgba(15,181,166,0.16), transparent 60%),
               radial-gradient(900px 520px at 100% 0%, rgba(244,178,62,0.10), transparent 55%);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.55);
}

/* ============================================================
   THEME — Deventia language (single theme, no light/dark toggle).
   Paper light base + emerald accent + forest inks for the dark
   hero/CTA bands + Sora display. Applies on EVERY page (this is
   in tokens.css, which every page loads); the landing's polish.css
   layers the dark hero/CTA on top.
   ============================================================ */
:root {
  color-scheme: light;
  /* emerald accent (replaces teal jade) */
  --jade-700:#047857; --jade-600:#059669; --jade-500:#10B981;
  --jade-400:#34D399; --jade-100:#D6F5E1; --jade-glow:rgba(16,185,129,0.32);
  /* paper light base */
  --bg:#F7F8F5; --bg-soft:#EDF1EE; --surface:#FFFFFF; --surface-2:#F2F5F2;
  --border:#E3E8E3; --border-strong:#C9D2CC;
  --text:#14271F; --text-soft:#3A4C43; --text-faint:#64736B;
  --on-accent:#03110C;
  /* forest inks for dark sections / result panels */
  --ink-900:#0C1A14; --ink-800:#10211A; --ink-700:#193029;
  --font-display:'Sora', system-ui, -apple-system, sans-serif;
  /* compact scale — titles & numbers were running oversized */
  --fs-md:1.02rem; --fs-lg:1.15rem; --fs-xl:1.35rem;
  --fs-2xl:1.6rem; --fs-3xl:1.95rem; --fs-4xl:2.4rem; --fs-5xl:2.7rem;
  --sp-7:2.25rem; --sp-8:2.75rem; --sp-9:4rem; --sp-10:5rem;
  --maxw:1120px;
  --page-wash:
    radial-gradient(1000px 560px at 12% -8%, rgba(16,185,129,0.07), transparent 60%),
    radial-gradient(820px 480px at 100% 0%, rgba(52,230,168,0.05), transparent 55%);
  --shadow-md: 0 4px 8px rgba(6,16,12,0.07), 0 24px 48px -24px rgba(6,16,12,0.14);
  --shadow-lg: 0 12px 30px rgba(6,16,12,0.12), 0 30px 60px -30px rgba(6,16,12,0.18);
}
/* one theme → hide the light/dark switch wherever it renders */
[data-theme-toggle] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}