/*
  Design tokens — Prestige Book Publishers
  Direction: white / navy / gold — sampled directly from the client-supplied
  design mock (navy #091930, gold #F3C418 — same gold as the logo, white
  #FFFFFF, and a warm cream #FEFBED used to alternate section rhythm).
  --color-accent resolves to gold everywhere — it reads clearly on both
  navy and white/cream, so no per-section deepening is needed.
*/

:root {
  /* ---------- Navy (dark) ---------- */
  --ink-950: #03050c; /* deepest corner of the hero gradient */
  --ink-900: #091930; /* primary navy — header, hero, CTA bands, footer */
  --ink-800: #10213a; /* lighter navy — dropdown panels, card fills on navy */
  --ink-700: #1a3355; /* borders/dividers on navy */
  --ink-600: #24406b;

  /* ---------- White / cream (light) ---------- */
  --paper-50: #ffffff; /* default light section */
  --paper-100: #fefbed; /* cream — alternate light section for rhythm */
  --paper-200: #f5edc9;
  --paper-muted: #e3d9ae;

  /* ---------- Gold accent (sampled from logo + mock) ---------- */
  --gold-100: #f8e6ad;
  --gold-300: #f3c418; /* exact mock/logo gold — used as-is on both navy and light */
  --gold-500: #f3c418;
  --gold-600: #d1a70f; /* slightly deeper gold, for small text needing extra contrast */
  --gold-glow: rgba(243, 196, 24, 0.4);

  /* ---------- Text ---------- */
  --text-on-dark: #ffffff;
  --text-on-dark-muted: #b7c2d6;
  --text-on-light: #091930;
  --text-on-light-muted: #5b6478;

  /* ---------- Semantic ---------- */
  --color-bg-dark: var(--ink-900);
  --color-bg-light: var(--paper-50);
  --color-accent: var(--gold-300);
  --color-accent-strong: var(--gold-100);
  --color-border-dark: rgba(255, 255, 255, 0.14);
  --color-border-light: rgba(9, 25, 48, 0.14);

  /* ---------- 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 many 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;
  }
}