/* ==========================================================================
   tokens.css — Golden Hour Gallery design tokens
   Source of truth: /DESIGN.md
   Restyle the entire site by editing the primitive values in :root only.
   ========================================================================== */

:root {
  /* ---------- Palette (primitive) ---------- */
  --cream: #fbf6ef;
  --cream-bright: #fff9f2;
  --white: #ffffff;
  --oat: #f0e7d9;
  --sand: #e4d8c5;
  --linen: #e3d6c6;
  --linen-soft: #efe4d3;

  --espresso: #2e211a;
  --cocoa: #5c4a3d;
  --muted: #8a7466;

  --amber: #b5652f;
  --amber-deep: #96501f;
  --gold: #c9974a;
  --rose: #a85f63;
  --rose-soft: #e0b696;
  --error: #b3261e;

  /* Warm off-whites used over photography */
  --on-photo: #fdf6ec;
  --on-photo-muted: #f0e2d0;

  /* ---------- Semantic roles ---------- */
  --surface: var(--cream);
  --surface-alt: var(--oat);
  --surface-raised: var(--white);
  --surface-inverse: var(--espresso);

  --ink: var(--espresso);
  --ink-muted: var(--cocoa);
  --ink-subtle: var(--muted);

  --border: var(--linen);
  --border-soft: var(--linen-soft);
  --border-strong: var(--sand);

  --accent: var(--amber);
  --accent-hover: var(--gold);
  --accent-soft: var(--rose-soft);
  --on-accent: var(--cream);

  --focus-ring: var(--amber);

  /* ---------- Typography ---------- */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display-lg: clamp(2.25rem, 1.3rem + 4.6vw, 4.5rem);
  --fs-display-md: clamp(2.25rem, 1.6rem + 2.8vw, 3.25rem);
  --fs-headline-lg: clamp(1.75rem, 1.35rem + 1.7vw, 2.25rem);
  --fs-headline-md: clamp(1.5rem, 1.3rem + 0.9vw, 1.75rem);
  --fs-headline-sm: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
  --fs-body-lg: 1.125rem;
  --fs-body-md: 0.9375rem;
  --fs-body-sm: 0.8125rem;
  --fs-label-lg: 0.875rem;
  --fs-label-md: 0.75rem;
  --fs-label-sm: 0.6875rem;

  --lh-display: 1.08;
  --lh-headline: 1.25;
  --lh-body: 1.65;

  --tracking-tight: -0.02em;
  --tracking-label: 0.12em;
  --tracking-label-wide: 0.15em;
  --tracking-eyebrow: 0.25em;

  /* ---------- Spacing ---------- */
  --space-xs: 0.375rem;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 8rem;

  --gutter: 1rem;
  --margin: 1.5rem;
  --section-y: 4.5rem;

  /* ---------- Layout ---------- */
  --container: 80rem; /* 1280px */
  --measure: 34rem;
  --header-height: 4.5rem;
  --radius: 0;

  /* ---------- Elevation (warm-tinted only) ---------- */
  --shadow-frame: 0 20px 40px -15px rgba(46, 33, 26, 0.1),
    0 2px 6px 0 rgba(46, 33, 26, 0.05);
  --shadow-lift: 0 28px 56px -20px rgba(46, 33, 26, 0.18),
    0 4px 10px 0 rgba(46, 33, 26, 0.06);
  --scrim: rgba(46, 33, 26, 0.62);
  --scrim-photo: linear-gradient(
    to top,
    rgba(46, 33, 26, 0.88) 0%,
    rgba(46, 33, 26, 0.38) 42%,
    rgba(46, 33, 26, 0.48) 100%
  );

  /* ---------- Motion ---------- */
  --transition: 200ms linear;
  --transition-slow: 700ms cubic-bezier(0.22, 1, 0.36, 1);

  /* ---------- Photo grade ---------- */
  --photo-grade: saturate(1.08) sepia(0.08) contrast(1.02);
}

/* Tablet */
@media (min-width: 768px) {
  :root {
    --gutter: 1.5rem;
    --margin: 2.5rem;
    --section-y: 6rem;
  }
}

/* Desktop */
@media (min-width: 1200px) {
  :root {
    --gutter: 2rem;
    --margin: 4rem;
    --section-y: 8rem;
  }
}