/*
 * Design tokens — Foto & Festa
 *
 * The single source of truth for the visual language described in
 * docs/design/brief.md. Everything downstream (components, layout, the mounted
 * print) reads from here; no component should hard-code a colour or a size.
 *
 * Plain CSS custom properties on purpose. No framework, no build step.
 */

:root {
  /* ---- Palette -------------------------------------------------------- *
   * The photos are the only saturated colour in the product. The interface
   * recedes so they can shine, which is why this palette is so narrow.      */

  --paper: #efe6d5;      /* album page — the general background, with grain */
  --print: #fdfbf6;      /* photographic paper — margins around photos, surfaces */
  --ink: #2a211a;        /* primary text, primary button */
  --soft-ink: #8b7c66;   /* secondary text, captions, metadata */
  --gold: #b4812e;       /* album foil — occasional accent, never the mood */
  --rule: rgba(42, 33, 26, 0.12); /* dividers, hairline borders */

  /* Derived tints. Kept as tokens so the handful of places that need a wash
     of ink or gold never invent their own alpha value. */
  --ink-wash: rgba(42, 33, 26, 0.06);
  --ink-edge: rgba(42, 33, 26, 0.05);  /* the crisp edge on a mounted print */
  --gold-wash: rgba(180, 129, 46, 0.1);
  --gold-rule: rgba(180, 129, 46, 0.32);
  --paper-shade: #e4d9c4;              /* paper, one step darker: chips, wells */

  /* Error is functional, not part of the brand mood. Warm enough to belong. */
  --alert: #9b3a26;

  /* ---- Typography ------------------------------------------------------ *
   * Fraunces carries the brand and signs the captions in italic; Hanken
   * Grotesk does all the functional work.                                   */

  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-ui: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Both faces are variable on the weight axis, and Fraunces also on the
     optical-size axis — the browser drives that one itself through the
     default font-optical-sizing: auto, so serifs stay proportionate from a
     14px caption up to a 48px hero without us setting anything per size. */

  /* A scale with real contrast — expressive headings, calm body, small
     captions. The hero fluidly spans the 36px mobile / 48px desktop pair
     from the design system rather than switching at a breakpoint. */
  --text-hero: clamp(2.25rem, 1.6rem + 2.8vw, 3rem);      /* 36 → 48 */
  --text-title: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);     /* 24 → 32 */
  --text-headline: 1.5rem;                                /* 24 */
  --text-body-lg: 1.125rem;                               /* 18 */
  --text-body: 0.9375rem;                                 /* 15 */
  --text-caption: 0.875rem;                               /* 14 — Fraunces italic */
  --text-label: 0.8125rem;                                /* 13 — uppercase eyebrow */
  --text-fine: 0.75rem;                                   /* 12 — legal, meta */

  --leading-tight: 1.1;   /* display: printed, not airy */
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-display: -0.02em;
  --tracking-label: 0.12em;

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

  /* ---- Spacing --------------------------------------------------------- *
   * Base unit 4px. Component spacing favours large, airy gaps — the album
   * page has margins, the social feed does not.                             */

  --space-1: 0.25rem;   /* 4 */
  --space-2: 0.5rem;    /* 8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */

  --gutter: var(--space-4);            /* between photos in the feed */
  --container-margin: var(--space-4);  /* page edge on mobile */
  --section-gap: var(--space-12);      /* between sections */
  --measure: 60ch;                     /* readable line length */
  --container-max: 72rem;              /* desktop page width */
  --reading-max: 34rem;                /* single-column guest content */

  /* ---- The mounted print ----------------------------------------------- */

  --print-margin: 7px;          /* white paper margin around the photo */
  --print-foot: var(--space-3); /* extra breathing room under the photo */
  --radius-photo: 2px;          /* the image itself — nested, organic */
  --radius-print: 6px;          /* the print — vintage rounded corner */
  --radius-control: 6px;        /* buttons and fields match the print */
  --radius-chip: 2px;           /* stamps and tags, near-square */

  /* Soft, multi-layered ambient light — a piece of cardstock resting on
     paper, never a heavy drop shadow. */
  --shadow-print: 0 1px 2px rgba(42, 33, 26, 0.05), 0 4px 12px rgba(42, 33, 26, 0.08);
  --shadow-print-lift: 0 2px 4px rgba(42, 33, 26, 0.06), 0 12px 28px rgba(42, 33, 26, 0.12);
  --shadow-surface: 0 1px 2px rgba(42, 33, 26, 0.04);
  --shadow-control: 0 1px 2px rgba(42, 33, 26, 0.08);

  /* ---- Motion ---------------------------------------------------------- */

  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  --duration-fast: 120ms;
  --duration: 240ms;
  --duration-slow: 600ms;

  /* ---- Layers ---------------------------------------------------------- */

  --z-header: 50;
  --z-overlay: 100;
}

@media (min-width: 48rem) {
  :root {
    --container-margin: var(--space-8);
    --section-gap: var(--space-16);
  }
}

/* Honour the guest's system preference. Anything that moves does so because
   it was asked to, not because it looked nice in a mockup. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}