/* Allurus design tokens.
   The page mixes themes by section: a deep ink "command centre" hero and dark showcase bands, light sections
   for reading. Each section opts in with .theme-dark or .theme-light; components only ever use the semantic
   tokens (--bg, --surface, --text, --accent ...), never raw colours. */

:root {
  /* Palette: Allurus brand guide. Obsidian #16181D, Allurus Teal #0F766E, Deep Teal #0B5F59,
     Champagne #D9B66F, Gold-on-light #B8914A, Slate #5F636B, Mist #F5F5F7.
     Accessibility additions: lighter teal/champagne tints for dark backgrounds, and a darker gold for small
     text on white (#B8914A is only 2.9:1 on white, so it is kept for lines and large figures). */
  --ink-950: #0e0f12;
  --ink-900: #16181d;        /* Obsidian */
  --ink-850: #1b1e24;
  --ink-800: #22252c;
  --ink-700: #2c3038;
  --mist-50: #f5f5f7;        /* Mist */
  --mist-100: #ececef;
  --mist-200: #dfe0e4;
  --slate-500: #5f636b;      /* Slate */
  --slate-700: #33363d;
  --teal-300: #5fd0c2;       /* teal tint, dark backgrounds */
  --teal-400: #2bb3a3;       /* teal tint, dark backgrounds */
  --teal-700: #0f766e;       /* Allurus Teal */
  --teal-800: #0b5f59;       /* Deep Teal: hover, pressed */
  --gold-300: #e8cc93;
  --gold-400: #d9b66f;       /* Champagne */
  --gold-500: #b8914a;       /* Gold on light: lines, large figures */
  --gold-700: #85662c;       /* gold small text on white (AA) */
  --coral-400: #ff7a6b;
  --coral-700: #b3261e;

  /* Type: Inter, per the brand guide, with the system font as fallback */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-hero: clamp(2.5rem, 4.4vw, 4.25rem);
  --fs-h2: clamp(2rem, 4.2vw, 3.4rem);
  --fs-h3: clamp(1.25rem, 1.9vw, 1.6rem);
  --fs-lead: clamp(1.08rem, 1.4vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;

  /* Shape & motion */
  --r-xl: 28px;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --gutter: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --maxw: 1180px;

  /* Light theme (default) */
  --bg: transparent;
  --bg-alt: rgba(255, 255, 255, .45);
  --surface: rgba(255, 255, 255, .72);
  --surface-2: rgba(236, 236, 239, .7);
  --text: #16181d;
  --muted: var(--slate-500);
  --line: var(--mist-200);
  --accent: var(--teal-700);          /* AA on white */
  --accent-soft: rgba(15, 118, 110, .1);
  --money: var(--gold-700);           /* AA on white */
  --money-soft: rgba(217, 182, 111, .16);
  --danger: var(--coral-700);
  --danger-soft: rgba(255, 122, 107, .14);
  --focus: #0f766e;
  --shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 18px 40px -24px rgba(22, 24, 29, .28);
  --grid-line: rgba(22, 24, 29, .05);
  color-scheme: light;
}

.theme-light {
  --bg: transparent;
  --bg-alt: rgba(255, 255, 255, .45);
  --surface: rgba(255, 255, 255, .72);
  --surface-2: rgba(236, 236, 239, .7);
  --text: #16181d;
  --muted: var(--slate-500);
  --line: var(--mist-200);
  --accent: var(--teal-700);
  --accent-soft: rgba(15, 118, 110, .1);
  --money: var(--gold-700);
  --money-soft: rgba(217, 182, 111, .16);
  --danger: var(--coral-700);
  --danger-soft: rgba(255, 122, 107, .14);
  --focus: #0f766e;
  --shadow: 0 1px 2px rgba(22, 24, 29, .04), 0 18px 40px -24px rgba(22, 24, 29, .28);
  --grid-line: rgba(22, 24, 29, .05);
  color-scheme: light;
}

/* All-white glass: the former dark bands now use the same light glass tokens. The class is kept so a dark
   band can be brought back later by restoring this block. */
.theme-dark {
  --bg: transparent;
  --bg-alt: rgba(255, 255, 255, .45);
  --surface: rgba(255, 255, 255, .68);
  --surface-2: rgba(236, 236, 239, .7);
  --text: #16181d;
  --muted: var(--slate-500);
  --line: rgba(22, 24, 29, .09);
  --accent: var(--teal-700);
  --accent-soft: rgba(15, 118, 110, .1);
  --money: var(--gold-700);
  --money-soft: rgba(217, 182, 111, .18);
  --danger: var(--coral-700);
  --danger-soft: rgba(255, 122, 107, .14);
  --focus: #0f766e;
  --shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 44px -26px rgba(22, 24, 29, .3);
  --grid-line: rgba(22, 24, 29, .045);
  color-scheme: light;
}