/*
  Design tokens — Penguin Publishing Group
  Palette: black / cream / signature orange, editorial-publishing mood.
*/

:root {
  /* ---------- Core palette ---------- */
  --black: #0a0a0a;
  --black-soft: #111111;
  --panel: #1c1c1c;
  --panel-hi: #262626;
  --cream: #f5f1ea;
  --cream-dim: #e7e0d3;
  --orange: #ff5a1f;
  --orange-hi: #ff7a45;
  --orange-dim: #cc4517;

  /* ---------- Semantic ---------- */
  --bg-dark: var(--black);
  --bg-light: var(--cream);
  --bg-panel: var(--panel);
  --text-on-dark: var(--cream);
  --text-on-dark-muted: rgba(245, 241, 234, 0.64);
  --text-on-light: var(--black);
  --text-on-light-muted: rgba(10, 10, 10, 0.6);
  --accent: var(--orange);
  --accent-strong: var(--orange-hi);
  --border-on-dark: rgba(245, 241, 234, 0.14);
  --border-on-light: rgba(10, 10, 10, 0.12);

  /* ---------- Typography ---------- */
  --font-display: 'Fraunces', 'Playfair Display', Georgia, serif;
  --font-body: 'Sora', 'Inter', -apple-system, 'Segoe UI', sans-serif;

  --tracking-eyebrow: 0.24em;
  --tracking-wide: 0.05em;

  --fs-eyebrow: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-body: 1rem;
  --fs-lg: 1.2rem;
  --fs-h5: clamp(1.1rem, 1.3vw, 1.35rem);
  --fs-h4: clamp(1.4rem, 1.8vw, 1.85rem);
  --fs-h3: clamp(1.9rem, 2.8vw, 2.6rem);
  --fs-h2: clamp(2.5rem, 4.8vw, 3.9rem);
  --fs-h1: clamp(3rem, 8vw, 7rem);

  /* ---------- Spacing ---------- */
  --space-3xs: 0.375rem;
  --space-2xs: 0.625rem;
  --space-xs: 1rem;
  --space-sm: 1.5rem;
  --space-md: 2.5rem;
  --space-lg: 4.5rem;
  --space-xl: 7rem;
  --space-2xl: 10rem;

  /* ---------- Layout ---------- */
  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --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: 1s;

  /* ---------- Z-index scale ---------- */
  --z-base: 1;
  --z-content: 6;
  --z-smoke: 50;
  --z-mobile-nav: 450;
  --z-header: 500;
  --z-cursor: 9999;
  --z-transition: 9990;
}