/* ==========================================================================
   Grace Photos — Design Tokens
   A cinematic, gallery-first palette: midnight ink, platinum blue light,
   pearl type. Named after their role, not their value, so the system
   stays coherent if any single value changes later.
   ========================================================================== */

:root {
  /* ---- Color: surfaces ---- */
  --color-void: #050711;         /* primary background */
  --color-charcoal: #090e1a;     /* alternating section surface */
  --color-charcoal-2: #0d1424;   /* slightly lifted surface */
  --color-card: #0d1422;         /* card surface */
  --color-card-hover: #121c30;   /* card hover surface */

  /* ---- Color: platinum blue accent (legacy variable names retained) ---- */
  --color-gold: #7da7ff;
  --color-gold-bright: #d9e7ff;
  --color-gold-deep: #4d6ed5;
  --color-gold-soft: rgba(125, 167, 255, 0.45);

  /* ---- Color: type ---- */
  --color-ivory: #f7f9ff;
  --color-ivory-dim: #d9e0ee;
  --color-stone: #9ba8bd;
  --color-stone-dim: #68758b;

  /* ---- Color: lines & overlays ---- */
  --color-line: rgba(142, 178, 255, 0.14);
  --color-line-strong: rgba(157, 190, 255, 0.34);
  --overlay-scrim-soft: rgba(4, 7, 16, 0.35);
  --overlay-scrim: rgba(4, 7, 16, 0.62);
  --overlay-scrim-strong: rgba(3, 5, 12, 0.86);

  /* ---- Type families ---- */
  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Manrope", "Avenir Next", Arial, sans-serif;

  /* ---- Type scale (fluid) ---- */
  --fs-hero: clamp(2.75rem, 3.2rem + 3vw, 6.2rem);
  --fs-h1: clamp(2.25rem, 1.9rem + 2vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 1.5rem + 1.1vw, 2.5rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.5vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.78rem;
  --fs-micro: 0.7rem;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;
  --section-pad: clamp(4.5rem, 4rem + 3vw, 9rem);

  /* ---- Layout ---- */
  --container-max: 1360px;
  --container-pad: clamp(1.25rem, 1rem + 2.5vw, 3.5rem);
  --radius-sm: 6px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-cinematic: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-shutter: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur-med: 480ms;
  --dur-slow: 900ms;

  /* ---- Shadow / glow ---- */
  --shadow-card: 0 30px 80px -32px rgba(0, 0, 0, 0.92), 0 10px 30px -18px rgba(72, 111, 218, 0.5);
  --glow-gold: 0 0 0 1px var(--color-line), 0 26px 70px -36px rgba(96, 139, 255, 0.48);
  --header-h: 92px;
  --header-h-scrolled: 72px;
}

@media (max-width: 640px) {
  :root {
    --header-h: 76px;
    --header-h-scrolled: 62px;
  }
}