/*
  Design tokens — Vantage Author's House
  Direction: white / pink / blue — sampled directly from the real logo
  (navy #0B1956, pink #F1ABBC). --color-accent resolves to a lighter pink by
  default (correct for the navy header/footer/dark sections) and is
  overridden to a deeper pink inside .section--light so it stays legible on
  white (see base.css) — same variable name everywhere, context decides shade.
*/

:root {
  /* ---------- Navy / "ink" (dark) ---------- */
  --ink-950: #060f38;
  --ink-900: #0b1956; /* exact logo navy */
  --ink-800: #16225f;
  --ink-700: #202f70;
  --ink-600: #2c3d84;

  /* ---------- White / "paper" (light) ---------- */
  --paper-50: #ffffff;
  --paper-100: #fdf7f9;
  --paper-200: #f5e8ed;
  --paper-muted: #d8c3cd;

  /* ---------- Pink accent (sampled from logo) ---------- */
  --pink-100: #fbe4ea;
  --pink-300: #f6c7d6;
  --pink-500: #f1abbc; /* exact logo pink */
  --pink-600: #c2496c; /* deeper — used where pink sits on white */
  --pink-glow: rgba(241, 171, 188, 0.45);

  /* ---------- Text ---------- */
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #aeb8e6;
  --text-on-light: #0b1956;
  --text-on-light-muted: #545f8a;

  /* ---------- Semantic ---------- */
  --color-bg-dark: var(--ink-900);
  --color-bg-light: var(--paper-50);
  --color-accent: var(--pink-300);
  --color-accent-strong: var(--pink-100);
  --color-border-dark: rgba(255, 255, 255, 0.14);
  --color-border-light: rgba(11, 25, 86, 0.12);

  /* ---------- Typography ---------- */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, "Segoe UI", sans-serif;

  --tracking-eyebrow: 0.22em;
  --tracking-wide: 0.06em;

  --fs-eyebrow: 0.75rem;
  --fs-body: 1rem;
  --fs-lg: 1.25rem;
  --fs-h4: clamp(1.25rem, 1.5vw, 1.6rem);
  --fs-h3: clamp(1.75rem, 2.6vw, 2.4rem);
  --fs-h2: clamp(2.4rem, 4.6vw, 3.75rem);
  --fs-h1: clamp(3rem, 7vw, 6.25rem);

  /* ---------- Spacing ----------
     Scaled down at tablet/mobile breakpoints below — these desktop values
     (esp. --space-xl/--space-2xl used for section padding-block) read as
     excessive whitespace once stacked across 15+ sections on a phone. */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --space-2xl: 10rem;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.6s;
  --dur-slow: 1.1s;

  /* ---------- Z-index scale ---------- */
  --z-header: 500;
  --z-cursor: 9999;
  --z-preloader: 9998;
  --z-transition: 9990;
  --z-grain: 40;
}

/* Tighter section rhythm on tablet and phone — same tokens, smaller values,
   so every component that already uses var(--space-*) adjusts automatically. */
@media (max-width: 900px) {
  :root {
    --space-lg: 3rem;
    --space-xl: 4.5rem;
    --space-2xl: 6rem;
  }
}
@media (max-width: 560px) {
  :root {
    --space-md: 1.5rem;
    --space-lg: 2.25rem;
    --space-xl: 3.25rem;
    --space-2xl: 4.25rem;
  }
}