/* ============================================================
   Doorbelle — Design Tokens ("Lacquer v1")
   Owned by: frontend-brand-guardian
   Source of truth: docs/design-system.md §3–§6, docs/mockup.html
   ============================================================
   This file defines ONLY custom properties + @font-face rules.
   No selectors that render anything — see components.css for the
   component vocabulary built on top of these tokens.

   Rule for every other file in this codebase: a raw hex/px/shadow
   value in a template is a bug. Reference a token. If a value you
   need isn't here, that's a signal to stop and reconsider before
   inventing a one-off — see design-system.md §11.
   ============================================================ */

:root {
  /* ---------- Color — §3 (authoritative hexes) ---------- */
  --porcelain: #FAF7F3;   /* app background — warm, never yellow */
  --surface: #FFFFFF;     /* cards and raised elements */
  --ink: #241B28;         /* primary text — plum-black, never pure black */
  --ink-soft: #71657A;    /* secondary text, captions */
  --lacquer: #D92B66;     /* THE accent — raspberry lacquer */
  --lacquer-deep: #A81F4F;/* hover/active states, gradient partner */
  --blush: #F7E9EE;       /* tinted surfaces, soft chips, ring track */
  --blush-line: #EDD9E1;  /* hairlines and borders on light surfaces */
  --plum: #4A2340;        /* eyebrows, labels, secondary pins/pending state */

  /* Polish palette — content only (swatches, galleries, avatars).
     NEVER used as UI chrome (buttons, headers, nav). */
  --nude: #E8C9B8;
  --coral: #E86A5E;
  --noir: #3B2436;
  --sheer: #F3E4DC;

  /* Map greenery only (from mockup) — not a UI chrome color either. */
  --sage-map: #DFE7DB;

  /* ---------- Shadows — exactly two. A third shadow is a bug. ---------- */
  --shadow-card: 0 2px 6px rgba(36, 27, 40, .06), 0 12px 28px rgba(36, 27, 40, .08);
  --shadow-pop: 0 4px 12px rgba(169, 31, 79, .25);

  /* ---------- Radii — 999 / 20 / 14 / 12. Nothing else. ---------- */
  --r-pill: 999px; /* chips, pills, buttons */
  --r-lg: 20px;    /* cards */
  --r-md: 14px;    /* inner elements (form fields, inset panels) */
  --r-sm: 12px;    /* icon tiles */

  /* ---------- Spacing scale — 4/8/12/16/20/24/32/44/64. No arbitrary values. ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-44: 44px; /* also the minimum touch target */
  --space-64: 64px;

  /* ---------- Grid ---------- */
  --content-max-width: 1120px;
  --gutter: var(--space-24);

  /* ---------- Typography — §4 ---------- */
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;

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

  /* Type scale: 11 / 12.5 / 13.5 / 14.5 / 16 / 17 / 20 / 24 / 26 / 28 / display */
  --fs-11: 11px;
  --fs-12-5: 12.5px;
  --fs-13-5: 13.5px;
  --fs-14-5: 14.5px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-display: clamp(40px, 6vw, 64px);

  --lh-display-tight: 1.04; /* hero headlines */
  --lh-display: 1.1;        /* screen titles, big numbers */
  --lh-body: 1.5;
  --lh-body-loose: 1.55;

  /* ---------- Motion — §7 (micro-interactions only) ---------- */
  --dur-hover: 180ms;
  --dur-hover-fast: 150ms;
  --ease-standard: ease;
}

/* ============================================================
   Self-hosted fonts — no external font requests anywhere (§4, Phase 0).
   Both faces are variable fonts; declare the full weight range once per
   style rather than per static weight.
   ============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-variable-latin.woff2") format("woff2");
  font-weight: 100 900;   /* variable axis wght 100..900 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/fraunces-variable-italic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/static/fonts/instrument-sans-variable-latin.woff2") format("woff2");
  font-weight: 400 700;   /* variable axis wght 400..700 */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("/static/fonts/instrument-sans-variable-italic-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}