/* 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: #0b0b0c; /* page background */
  --color-bg-alt: #141417; /* alternating / muted band */
  --color-surface: #17171b; /* cards, panels */
  --color-surface-alt: #f5f5f5; /* nested surface */
  --color-text: #f5f5f5; /* primary text */
  --color-text-dim: #b8b8bd; /* body / secondary */
  --color-text-muted: #7c7c85; /* captions, meta */
  --color-text-invert: #0b0b0c; /* text on dark surfaces */
  --color-accent: #ff3b00; /* brand accent (links, highlights) */
  --color-accent-hover: #ff5c2e;
  --color-cta: #ff3b00; /* primary call-to-action */
  --color-cta-hover: #ff5c2e;
  --color-link: var(--color-accent);
  --color-border: #2a2a30;
  --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(60px, 9vw, 116px);

  /* ----- RADIUS -------------------------------------------------------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ----- TYPOGRAPHY — roles + fluid scale ------------------------------ */
  --font-heading:
    "Space Grotesk", "Be Vietnam Pro", sans-serif; /* Space Grotesk ships its own vietnamese subset → whole heading is uniform Space Grotesk incl. diacritics (Ộ/Ờ/Ở). Be Vietnam Pro is only a transient fallback during the preload swap (real font, natural size — never the oversized Arial metric fallback). */

  --font-body:
    "Be Vietnam Pro", "Be Vietnam Pro Fallback", sans-serif; /* self-hosted + metric fallback */

  /* 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: 700; /* Space Grotesk (heading) tops out at 700; avoids synthetic-bold on display */

  /* ----- 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;
}

/* 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;
}