/*
  FOUND OBJECTS — design tokens
  Single source of truth for color, type, spacing, containers, borders, ratios.

  Tokens are prefixed --fo- because Dawn defines --color-* as "R,G,B" triplets
  consumed via rgba(). Prefixing keeps both systems intact.

  Never hardcode a hex value or magic spacing number in a section or snippet.
*/

:root {
  /*
    ---- Brand palette -----------------------------------------------------
    Exact values from the supplied brand assets (brand-assets-preview.html).
    Do not approximate these from memory or re-derive them from an image.

    The UI chrome is built from warm white, bone and charcoal; the saturated half
    of the palette belongs to photography, merchandise and occasional editorial
    accents — never to buttons and forms.

    Contrast against the page ground (#f7f5f1): charcoal 14.27 · muted text 6.67 ·
    subtle text 5.87 · aged brass 5.48 · lacquer red 5.45. Every accent clears AA.
    NOTE: charcoal on aged brass is only 2.60 — put paper on brass, never charcoal.
  */
  --fo-warm-white: #f0e5d7;   /* brand cream — now a surface, not the page ground */
  --fo-bone: #daccbb;
  /* Page ground: a barely-warm off-white. The brand cream read too heavy across
     a full page; it is retained above for panels and secondary surfaces. */
  --fo-paper: #f7f5f1;
  --fo-charcoal: #242423;
  --fo-ink-blue: #162431;
  --fo-olive: #3a3917;
  --fo-rust: #882d09;
  --fo-oxblood: #5b0e0c;
  --fo-lacquer-red: #c61810;
  --fo-aged-brass: #875a24;
  --fo-walnut: #43280f;

  /* ---- Color: base ------------------------------------------------------ */
  --fo-color-bg: var(--fo-paper);
  --fo-color-surface: var(--fo-warm-white);
  --fo-color-surface-sunken: var(--fo-bone);
  --fo-color-inverse-bg: var(--fo-charcoal);
  --fo-color-inverse-text: var(--fo-paper);

  /* Photography is natural-light and true to life, so images sit on a warm
     neutral ground rather than a dark studio backdrop. */
  --fo-color-photo-backdrop: #ece7df;

  /* ---- Color: text ------------------------------------------------------ */
  --fo-color-text: var(--fo-charcoal);
  --fo-color-text-muted: #5c564c;   /* 5.84:1 on warm white */
  --fo-color-text-subtle: #655e55;  /* 5.14:1 on warm white */
  --fo-color-text-on-dark: var(--fo-paper);
  --fo-color-text-on-dark-muted: rgba(247, 245, 241, 0.78);

  /* ---- Color: lines ----------------------------------------------------- */
  --fo-color-border: rgba(36, 36, 35, 0.14);   /* decorative rules only */
  /* Control boundaries — inputs, buttons. WCAG 1.4.11 requires 3:1 against the
     adjacent surface, so these alphas are set by measurement, not by eye:
     0.55 over paper = 3.53:1 · 0.42 over charcoal = 3.73:1 */
  --fo-color-border-strong: rgba(36, 36, 35, 0.55);
  --fo-color-border-on-dark: rgba(247, 245, 241, 0.42);

  /* ---- Color: accents ---------------------------------------------------
     Used deliberately — a journal tag, a rule, a category label, an editorial
     panel. Colour mostly arrives through the objects themselves. */
  --fo-color-accent: var(--fo-oxblood);
  --fo-color-accent-alt: var(--fo-ink-blue);

  /* Scrim over photography. A flat tint, not a gradient.
     Imagery is bright, so label scrims have to work harder than a mood tint. */
  --fo-scrim: rgba(36, 36, 35, 0.32);
  --fo-scrim-strong: rgba(36, 36, 35, 0.5);
  --fo-scrim-hover: rgba(36, 36, 35, 0.62);

  /* ---- Color: states ---------------------------------------------------- */
  --fo-color-sold: #655e55;
  --fo-color-focus: var(--fo-ink-blue);
  --fo-color-error: #8a3324;
  --fo-color-success: #3d5c3a;

  /* ---- Typography -------------------------------------------------------
     Assembly sets display type; Sento Sans sets body text.

     This supersedes the mood board (§ 07), which pairs Sento Sans with Lora —
     the founder corrected it on 2026-09-08. Do not reintroduce Lora: the body
     face is a geometric sans, not a serif.

     BOTH FACES ARE COMMERCIAL AND NEITHER IS PRESENT. Nothing on the site
     renders in them today; the fallbacks below are what a visitor actually
     sees. Never download or embed either file without a licence — obtain a
     webfont licence, drop the .woff2 into src/fonts/, and add @font-face.

     Each face leads its own stack, so installing either one is a no-op for
     every component. The fallbacks hold the right character — geometric sans
     throughout — with display leaning Futura-geometric and body leaning
     Avenir-humanist so the two roles stay distinguishable until the real
     faces arrive. See docs/FOUND_OBJECTS_SITE_SPEC.md § 4. */
  --fo-font-display: 'Assembly', 'Futura', 'Century Gothic', 'Avenir Next', ui-sans-serif, system-ui, sans-serif;
  --fo-font-body: 'Sento Sans', 'Avenir Next', 'Avenir', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;

  --fo-weight-regular: 400;
  --fo-weight-medium: 500;
  --fo-weight-bold: 700;

  /* Fluid display sizes; fixed body sizes for predictable reading */
  --fo-text-display-xl: clamp(2.75rem, 6vw, 5.25rem);
  --fo-text-display-lg: clamp(2.125rem, 4.2vw, 3.5rem);
  --fo-text-display-md: clamp(1.625rem, 2.8vw, 2.25rem);
  --fo-text-display-sm: clamp(1.25rem, 1.9vw, 1.5rem);
  --fo-text-lg: 1.125rem;
  --fo-text-base: 1rem;
  --fo-text-sm: 0.875rem;
  --fo-text-xs: 0.8125rem;
  --fo-text-eyebrow: 0.75rem;

  --fo-leading-tight: 1.1;    /* display */
  --fo-leading-snug: 1.3;     /* subheads */
  --fo-leading-normal: 1.5;   /* body */
  --fo-leading-relaxed: 1.6;  /* long-form prose at the wider measure */

  --fo-tracking-display: -0.015em;
  --fo-tracking-normal: 0;
  --fo-tracking-wide: 0.06em;
  --fo-tracking-eyebrow: 0.14em;
  /* The wordmark is set noticeably wider than any other type in the system */
  --fo-tracking-wordmark: 0.3em;

  /* ---- Spacing ---------------------------------------------------------- */
  --fo-space-1: 0.25rem;
  --fo-space-2: 0.5rem;
  --fo-space-3: 0.75rem;
  --fo-space-4: 1rem;
  --fo-space-5: 1.5rem;
  --fo-space-6: 2rem;
  --fo-space-7: 2.5rem;
  --fo-space-8: 3rem;
  --fo-space-9: 4rem;
  --fo-space-10: 5rem;
  --fo-space-11: 6rem;
  --fo-space-12: 7.5rem;

  /* ---- Vertical rhythm --------------------------------------------------
     Three steps only. More than three stops reading as a system and starts
     reading as noise, so every vertical gap on the site is one of these.

       stack-sm  within a group   — label to value, image to caption
       stack-md  group to group   — heading to body, field to field
       stack-lg  section to section

     The rule that makes grouping legible: the space around a group must be
     larger than the space inside it. stack-lg > stack-md > stack-sm, always. */
  --fo-stack-sm: var(--fo-space-3);   /* 12px */
  --fo-stack-md: var(--fo-space-5);   /* 24px */
  --fo-stack-lg: var(--fo-space-8);   /* 48px */

  /* Between major page sections */
  --fo-section-gap: clamp(2.5rem, 4vw, 3.5rem);        /* 40–56px */
  --fo-section-gap-tight: clamp(1.5rem, 2.5vw, 2.25rem); /* 24–36px */

  /* ---- Containers ------------------------------------------------------- */
  --fo-container-max: 1440px;
  --fo-container-wide: 1680px;
  --fo-container-narrow: 46rem;
  --fo-container-content: 59.375rem;  /* 950px — the content column */
  --fo-measure: 46.875rem;            /* 750px — text never runs wider than this */
  --fo-gutter: clamp(1.25rem, 4vw, 3rem);   /* 20–48px — 48 is the design frame */

  /* ---- Borders & radii (restrained — no large rounded cards) ------------ */
  --fo-hairline: 1px;
  --fo-radius-none: 0;
  --fo-radius-sm: 2px;

  /* ---- Image ratios ----------------------------------------------------- */
  --fo-ratio-product: 4 / 5;
  --fo-ratio-editorial: 3 / 2;
  --fo-ratio-tile: 1 / 1;
  --fo-ratio-hero: 16 / 9;

  /* ---- Controls --------------------------------------------------------- */
  --fo-control-height: 3rem;
  --fo-control-padding-x: var(--fo-space-5);
  --fo-focus-ring-width: 2px;
  --fo-focus-ring-offset: 2px;

  /* ---- Motion (subtle only) --------------------------------------------- */
  --fo-duration-fast: 120ms;
  --fo-duration: 220ms;
  --fo-duration-slow: 400ms;
  --fo-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/*
  Breakpoints are documented here for reference — CSS custom properties cannot
  be used inside media queries. Values match Dawn's so there is one system:
  sm 480px · md 750px · lg 990px · xl 1200px
*/

@media (prefers-reduced-motion: reduce) {
  :root {
    --fo-duration-fast: 0ms;
    --fo-duration: 0ms;
    --fo-duration-slow: 0ms;
  }
}