/* The Setai, St. Maarten. Design tokens.
   Source of truth: _AESTHETIC.json v1.0.0. Components consume the theme mapped
   vars (--bg, --fg, --muted, --rule, --accent) only, never the raw palette. */

:root {
  /* Palette, core */
  --cream: #F6F3EF;
  --cream-deep: #EDE7DF;
  --ink: #232320;
  --setai-black: #0A0A0A;
  --ink-deep: #161614;
  /* Dark-theme accent (maps to --accent on ink/black). Lightened from #927A48
     to clear WCAG AA (4.5:1) on #161614; measures 4.80:1. Light-theme gold
     (--gold-dark) is unchanged. */
  --gold-primary: #97814D;
  --gold-dark: #816B3D;
  --white: #FFFFFF;
  --grey: #626160;

  /* Palette, warm support (ground the page, accent only) */
  --sand: #D8C9AE;
  --driftwood: #A08A6F;
  --terracotta: #B26E4B;
  --botanical: #5C6B54;

  /* Palette, cool accent (controlled bursts only, never a field) */
  --spa-teal: #4FACAA;
  --coastal-blue: #7FA3B8;

  /* Hairline rules, gold or driftwood, never cards or shadows */
  --hairline-gold: rgba(146, 122, 72, 0.45);
  --hairline-driftwood: rgba(160, 138, 111, 0.40);

  /* Type families. Gambetta stands in for Clarice (picked 7/13, replacing
     the default Fraunces), Bespoke Sans for Whitney. */
  --font-display: "Gambetta", Georgia, "Times New Roman", serif;
  --font-body: "Bespoke Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale, base 16px, ratio 1.3. Headlines are fluid within the deck range. */
  --fs-eyebrow: 0.72rem;
  --fs-body: clamp(1rem, 0.98rem + 0.15vw, 1.0625rem);
  --fs-body-lg: 1.2rem;
  --fs-h4: 1.35rem;
  --fs-h3: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.2vw, 2.9rem);
  --fs-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);

  /* Line heights */
  --lh-body: 1.7;
  --lh-heading: 1.12;
  --lh-tight: 1.06;

  /* Letter spacing */
  --ls-eyebrow: 0.18em;
  --ls-headline: 0.01em;
  --ls-button: 0.14em;

  /* Weights */
  --fw-body: 300;
  --fw-eyebrow: 400;
  --fw-headline: 400;
  --fw-strong: 500;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 8rem;

  /* Motion. Slow, intentional, architectural. No bounce, no springy scaling. */
  --dur-fast: 0.3s;
  --dur: 0.6s;
  --dur-slow: 0.8s;
  --dur-crossfade: 1.2s;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --container-max: 1280px;
  --measure: 60ch;
  --gutter: var(--space-md);
  /* Inflated by the notch inset on iPhones so nav, overlay, hero clearance,
     and scroll-padding all stay clear of the status bar (0 elsewhere) */
  --nav-h: calc(4.5rem + env(safe-area-inset-top, 0px));
  --wa-size: 3.5rem;
  --z-nav: 100;
  --z-wa: 95;
}

/* Theme maps. Body defaults to cream. Flipping a section is one attribute edit. */
:root,
[data-theme="cream"] {
  --bg: var(--cream);
  --fg: var(--ink);
  --muted: var(--grey);
  --rule: var(--hairline-gold);
  --accent: var(--gold-dark);
}

[data-theme="ink"] {
  --bg: var(--ink-deep);
  --fg: var(--cream);
  --muted: rgba(246, 243, 239, 0.62);
  --rule: var(--hairline-gold);
  --accent: var(--gold-primary);
}

[data-theme="black"] {
  --bg: var(--setai-black);
  --fg: var(--cream);
  --muted: rgba(246, 243, 239, 0.60);
  --rule: var(--hairline-gold);
  --accent: var(--gold-primary);
}