/* Generated by scaffold.py from design-lock.json — do not edit by hand.
   Values come from the site's design-lock; names/structure from the canon. */

/* ==========================================================================
   STANDARDS CANON — Design Tokens
   --------------------------------------------------------------------------
   This file defines the CANONICAL TOKEN NAMES every site must use.
   The VALUES here are REFERENCE DEFAULTS. Each site overrides the values it
   needs in its own :root (driven by projects/{site}/design-lock.json).

   RULE: code references var(--token). Never hardcode a themeable value.
   ========================================================================== */

:root {
  /* ----- COLOR — semantic roles (override per site) --------------------- */
  --color-bg: #fff9ef; /* page background */
  --color-bg-alt: #fff2da; /* alternating / muted band */
  --color-surface: #fff; /* cards, panels */
  --color-surface-alt: #f5f7fb; /* nested surface */
  --color-text: #43120d; /* primary text */
  --color-text-dim: #6b4a34; /* body / secondary */
  --color-text-muted: #977a63; /* captions, meta */
  --color-text-invert: #fff9ef; /* text on dark surfaces */
  --color-accent: #f68b1f; /* brand accent (links, highlights) */
  --color-accent-hover: #e07d16;
  --color-cta: #febd1e; /* primary call-to-action */
  --color-cta-hover: #f6a800;
  --color-link: var(--color-accent);
  --color-border: #f0dcae;
  --color-border-strong: #cbd5e1;

  /* status */
  --color-success: #127a52;
  --color-warning: #8a5a00;
  --color-danger: #c0283c;
  --color-info: #2a6fb0;

  /* ----- SPACING — 8px rhythm, 4px half-steps -------------------------- */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

  /* ----- LAYOUT — containers & gutter ---------------------------------- */
  --container: 1440px; /* wide / hero sections */
  --container-content: 1200px; /* default content width */
  --container-narrow: 760px; /* prose, forms, single-column reading */
  --gutter: 24px; /* horizontal page padding */

  /* section vertical rhythm — fluid */
  --section-y: clamp(58px, 8vw, 110px);

  /* ----- RADIUS -------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 18px;
  --radius-lg: 30px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ----- TYPOGRAPHY — roles + fluid scale ------------------------------ */
  --font-heading: "Bricolage Grotesque", system-ui, sans-serif; /* override per site */
  --font-body: "Be Vietnam Pro", system-ui, sans-serif; /* override per site */

  /* fluid type scale: clamp(min, preferred-vw, max) */
  --text-xs: clamp(12px, 0.8vw, 13px);
  --text-sm: clamp(13px, 0.9vw, 14px);
  --text-base: clamp(15px, 1vw, 16px);
  --text-lg: clamp(17px, 1.3vw, 19px);
  --text-xl: clamp(20px, 1.8vw, 24px);
  --text-2xl: clamp(24px, 2.6vw, 32px);
  --text-3xl: clamp(30px, 4.4vw, 52px);
  --text-4xl: clamp(40px, 5.6vw, 74px);
  --leading-tight: 1.15; /* headings */
  --leading-snug: 1.35; /* cards, UI */
  --leading-body: 1.65; /* prose */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* ----- ELEVATION ----------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgb(1 17 76 / 6%);
  --shadow: 0 4px 16px rgb(1 17 76 / 8%);
  --shadow-lg: 0 16px 48px rgb(1 17 76 / 12%);

  /* ----- MOTION -------------------------------------------------------- */
  --dur-fast: 0.15s;
  --dur-base: 0.2s;
  --dur-slow: 0.4s;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);

  /* ----- Z-INDEX SCALE ------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* ----- BRAND overrides (FBK design-lock; a later :root wins) -------------- */
:root {
  --honey: #febd1e;
  --amber: #f68b1f;
  --cocoa: #43120d;
  --cream: #fff9ef;
  --cream-2: #fff2da;
  --cream-3: #ffe6b0;
  --leaf: #7fae63;
  --leaf-bg: #eef5e6;
  --sky: #6db7c8;
  --radius: 18px;
  --reading: 760px;
  --gutter: clamp(20px, 4vw, 64px);
  --shadow: 0 14px 34px rgb(67 18 13 / 10%);
  --shadow-lg: 0 26px 60px rgb(67 18 13 / 16%);
  --ease: cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* Canonical container utility — every site uses this shape.
   The width token is the only thing that varies. */
.container {
  width: 100%;
  max-width: var(--container-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--container);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Full-bleed break-out: an edge-to-edge child inside a contained parent.
   Prefer wrapping a full-width section around a .container instead (see layout.md). */
.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Fit-to-viewport hero. svh avoids the mobile URL-bar jump that vh causes. */
.hero--full {
  min-height: 100svh;
}