/* ==========================================================================
   YVES & VALÉRIE — DESIGN TOKENS
   Owner: UI-1 (identity/hero). This is the single source of truth for the
   whole site. tokens.css → base.css → hero.css → chrome.css → grid.css →
   lightbox.css → motion.css. Every downstream file MUST consume these custom
   properties instead of hardcoding colors, sizes, easings, etc. If a token
   you need is missing, add a local `var(--token, fallback)` rather than a
   raw literal.

   DESIGN DIRECTION — "Darkroom & Paper"
   An editorial, cinematic wedding album. Dark theme reads like a warm
   darkroom / film negative sleeve: warm charcoal, bone ink, a dusty-rose
   accent. Light theme reads like a printed album page on warm paper stock —
   a genuine second design, not an inversion. The photographs stay the
   loudest thing on the page in both.

   Contents
     1. Fonts (@font-face)
     2. Typography (families, fluid scale, leading, tracking, weight)
     3. Spacing (fixed + fluid)
     4. Radius
     5. Blur
     6. Motion (easing + duration) — UI-3 builds all motion on these
     7. Z-index scale
     8. Layout helpers (header height, content widths)
     9. Texture (inline SVG grain, reusable)
    10. Cinema tokens — theme-INVARIANT colors for photo-backed surfaces
        (hero, lightbox stage). Documented in full below.
    11. Theme: dark (default)
    12. Theme: light (real second design)
    13. prefers-contrast enhancements
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. FONTS
   Self-hosted under public/assets/fonts/ (owned by CODE-A, see FONTS.md
   there for provenance). Dancing Script is a static 400 TTF; Cormorant
   Garamond and Inter both turned out to be true variable fonts (one file
   legitimately covers their whole weight range), so each gets a single
   @font-face with a `font-weight` range rather than one rule per weight.
   The doubled `src:` on the variable faces (woff2-variations, then plain
   woff2) is belt-and-suspenders for older engines; same file either way.
   Everything else in the site refers only to the family names via
   --font-display / --font-serif / --font-sans, never to filenames, and
   every family carries a full system fallback stack so a missing file
   degrades silently instead of breaking the page.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Dancing Script";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/DancingScript-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/fonts/CormorantGaramond-Variable.woff2") format("woff2-variations"),
       url("../assets/fonts/CormorantGaramond-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/Inter-Variable.woff2") format("woff2-variations"),
       url("../assets/fonts/Inter-Variable.woff2") format("woff2");
}


:root {

  /* ------------------------------------------------------------------------
     2. TYPOGRAPHY
     Three families, always with a robust system fallback so text is never
     invisible while fonts load or if a file 404s.
     --font-display : script — the "&" flourish, rare accent word marks
     --font-serif   : editorial serif — names, headings, pull quotes
     --font-sans    : workhorse UI — body copy, nav, buttons, meta
     ------------------------------------------------------------------------ */
  --font-display: "Dancing Script", "Segoe Script", "Brush Script MT", cursive;
  --font-serif: "Cormorant Garamond", ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid type scale. Each step is clamp(min, preferred, max) so type
     breathes with the viewport instead of jumping at breakpoints. */
  --text-xs: clamp(0.75rem, 0.71rem + 0.2vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.83rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.0625rem);
  --text-md: clamp(1.125rem, 1.06rem + 0.35vw, 1.25rem);
  --text-lg: clamp(1.3rem, 1.18rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
  --text-2xl: clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem);
  --text-3xl: clamp(2.25rem, 1.85rem + 2vw, 3.25rem);
  --text-4xl: clamp(2.75rem, 2.1rem + 3.2vw, 4.5rem);
  --text-5xl: clamp(3.25rem, 2.3rem + 4.8vw, 6rem);
  --text-6xl: clamp(3.5rem, 2rem + 7.5vw, 8rem);

  --leading-none: 1;
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --leading-loose: 1.85;

  --tracking-tighter: -0.03em;
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;
  --tracking-widest: 0.24em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;


  /* ------------------------------------------------------------------------
     3. SPACING
     Fixed scale for component-level rhythm, fluid scale for section-level
     rhythm (page padding, gaps between major blocks).
     ------------------------------------------------------------------------ */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --space-fluid-2xs: clamp(0.5rem, 0.45rem + 0.3vw, 0.75rem);
  --space-fluid-xs: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
  --space-fluid-sm: clamp(1.25rem, 1rem + 1vw, 2rem);
  --space-fluid-md: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  --space-fluid-lg: clamp(3rem, 2rem + 4vw, 6rem);
  --space-fluid-xl: clamp(4.5rem, 3rem + 6vw, 9rem);
  --space-fluid-2xl: clamp(6rem, 4rem + 8vw, 12rem);


  /* ------------------------------------------------------------------------
     4. RADIUS
     ------------------------------------------------------------------------ */
  --radius-xs: 0.1875rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.75rem;
  --radius-full: 999px;


  /* ------------------------------------------------------------------------
     5. BLUR
     ------------------------------------------------------------------------ */
  --blur-xs: 3px;
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 28px;
  --blur-xl: 48px;


  /* ------------------------------------------------------------------------
     6. MOTION — easing + duration
     UI-3 builds all transitions/keyframes on these; keep this set generous
     and expressive. Pair fast/mechanical UI feedback with --ease-out or
     --ease-out-expo; reach for --ease-spring on anything meant to feel alive
     (the "&" flourish, tile hovers, lightbox open). Always gate motion
     behind prefers-reduced-motion downstream.
     ------------------------------------------------------------------------ */
  --ease-linear: linear;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring-soft: cubic-bezier(0.3, 1.2, 0.4, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);

  --dur-instant: 100ms;
  --dur-fast: 180ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;
  --dur-cinematic: 900ms;
  --dur-ambient: 2400ms;
  --dur-kenburns: 24000ms;


  /* ------------------------------------------------------------------------
     7. Z-INDEX SCALE
     Centralised so stacking never gets fought over between files. Hero's
     internal layers sit low (1–15) because #hero uses `isolation: isolate`
     and contains them in their own stacking context; site-level chrome
     stacks above that.
     ------------------------------------------------------------------------ */
  --z-below: -1;
  --z-base: 0;
  --z-media: 1;
  --z-scrim: 2;
  --z-grain: 3;
  --z-content: 10;
  --z-scrollcue: 15;
  --z-toolbar: 40;
  --z-header: 50;
  --z-dropdown: 60;
  --z-overlay: 80;
  --z-lightbox: 100;
  --z-toast: 110;
  --z-skiplink: 999;


  /* ------------------------------------------------------------------------
     8. LAYOUT HELPERS
     Small bonus set beyond the brief's explicit list — shared so the fixed
     header height and content measure stay consistent across owners.
     UI-2: size #siteHeader to match --header-h so base.css's
     scroll-padding-top lines up with the real header.
     ------------------------------------------------------------------------ */
  --header-h: clamp(4rem, 3.4rem + 2.2vw, 5.5rem);
  --content-max: 90rem;
  --prose-max: 42rem;


  /* ------------------------------------------------------------------------
     9. TEXTURE
     Reusable inline film-grain, encoded as an SVG feTurbulence data URI —
     no external file. Consumers set their own opacity/blend-mode; hero.css
     uses this at very low opacity for .hero__grain.
     ------------------------------------------------------------------------ */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");


  /* ------------------------------------------------------------------------
     10. CINEMA TOKENS — theme-INVARIANT
     These deliberately do NOT change between [data-theme="dark"] and
     [data-theme="light"]. They back photo-stage surfaces — the hero (over a
     photograph) and the lightbox (a viewing stage) — which read as a
     consistent "darkroom" regardless of which theme the rest of the chrome
     is in. Using the theme-swapped --color-accent for the hero's "&" or the
     theme-swapped --color-text-primary for hero copy would fail contrast in
     light mode (dark ink text on a dark scrim over a photo). Use these
     instead for anything sitting directly on a photograph.
     ------------------------------------------------------------------------ */
  --color-ink: #0b0908;
  --color-ink-rgb: 11 9 8;
  --color-overlay: rgba(11, 9, 8, 0.72);
  --color-overlay-soft: rgba(11, 9, 8, 0.45);

  --color-scrim-text: #f7f1e6;
  --color-scrim-text-rgb: 247 241 230;
  --color-scrim-text-muted: rgba(247, 241, 230, 0.72);
  --color-scrim-border: rgba(247, 241, 230, 0.35);
  --color-scrim-accent: #cf9484;
}


/* ==========================================================================
   11. THEME: DARK (default)
   "Warm darkroom." Near-black warm charcoal surfaces, bone/ivory text, a
   dusty-rose accent. This block doubles as the no-attribute fallback
   (:root) and the explicit [data-theme="dark"] state so the page is never
   unstyled before JS runs.
   ========================================================================== */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  --color-surface: #14110f;
  --color-surface-elevated: #1e1916;
  --color-surface-sunken: #0c0a09;

  --color-text-primary: #f3ead9;
  --color-text-secondary: #cabfaf;
  --color-text-muted: #8d8175;
  --color-text-inverse: #17120f;

  --color-border: #332c26;
  --color-border-strong: #473e35;

  --color-accent: #cf9484;
  --color-accent-hover: #dba997;
  --color-accent-active: #b87a67;
  --color-accent-soft: rgba(207, 148, 132, 0.14);
  --color-accent-rgb: 207 148 132;

  /* secondary, muted-metallic accent — decorative use (favorite badges,
     small icon fills); not guaranteed AA at small text sizes */
  --color-accent-gold: #c2a26b;
  --color-accent-gold-hover: #d1b483;
  --color-accent-gold-active: #a98a55;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 40px 90px -20px rgba(0, 0, 0, 0.65);
  --shadow-inner: inset 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-glow-accent: 0 0 32px rgba(207, 148, 132, 0.3);
}


/* ==========================================================================
   12. THEME: LIGHT — a real second design
   "Paper album." Warm paper-white surfaces, ink-brown text, a deeper
   terracotta-rose accent tuned to hold AA against paper rather than a
   simple inversion of the dark values.
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  --color-surface: #f6f0e4;
  --color-surface-elevated: #fffdf8;
  --color-surface-sunken: #ece2cf;

  --color-text-primary: #241f1b;
  --color-text-secondary: #5c5044;
  --color-text-muted: #766952;
  --color-text-inverse: #faf5ea;

  --color-border: #e1d5bf;
  --color-border-strong: #cabb9e;

  --color-accent: #9c5643;
  --color-accent-hover: #874333;
  --color-accent-active: #6e372a;
  --color-accent-soft: rgba(156, 86, 67, 0.12);
  --color-accent-rgb: 156 86 67;

  --color-accent-gold: #8f6c31;
  --color-accent-gold-hover: #765a29;
  --color-accent-gold-active: #5f4a21;

  --shadow-sm: 0 1px 2px rgba(70, 55, 40, 0.1);
  --shadow-md: 0 10px 30px -10px rgba(70, 55, 40, 0.18);
  --shadow-lg: 0 24px 60px -16px rgba(60, 45, 30, 0.2);
  --shadow-xl: 0 40px 90px -20px rgba(50, 38, 25, 0.24);
  --shadow-inner: inset 0 1px 3px rgba(60, 45, 30, 0.12);
  --shadow-glow-accent: 0 0 32px rgba(156, 86, 67, 0.22);
}


/* ==========================================================================
   13. PREFERS-CONTRAST
   Token-level bump so every downstream file benefits automatically: borders
   firm up and muted text moves closer to secondary.
   ========================================================================== */
@media (prefers-contrast: more) {
  :root,
  [data-theme="dark"] {
    --color-border: #5a4f44;
    --color-border-strong: #6e6153;
    --color-text-muted: #a89b8c;
  }
  [data-theme="light"] {
    --color-border: #b8a888;
    --color-border-strong: #a4926e;
    --color-text-muted: #5c5044;
  }
}