/* ==========================================================================
   Cocktails & Such — design tokens.
   THE SINGLE SOURCE OF TRUTH FOR COLOUR, SIZE AND DURATION. site.css and
   panel.css consume these; check_no_raw_hex() in build.py fails the build on
   a literal #hex in either of them.

   PROVENANCE — every token is tagged:
     SAMPLED — read off Cocktails & Such's own material (census 2026-11-02,
               _source/extract in ~/dev/cocktailsandsuch):
               logo  = C&S mastermix.pptx ppt/media/image3.png (green swirl glass)
               gold  = C&S mastermix.pptx image21.png (flywheel arrows) + image25.png frame
               dark  = C&S mastermix.pptx image25.png background
     OURS    — a LOOP design decision.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 300 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2");
  font-weight: 300 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* --- Colour ------------------------------------------------------------- */
  --night:      #121418;  /* SAMPLED — deck background (image25 census #181820/#101818) */
  --night-2:    #1a1d23;  /* OURS — raised panel on night */
  --night-3:    #23272f;  /* OURS — card / input surface */
  --line-dark:  #343943;  /* OURS — hairline on night */
  --cream:      #f4efe4;  /* OURS — primary text on night (16.08:1 vs --night, WCAG formula, computed 2026-11-02) */
  --cream-soft: #b9b4a8;  /* OURS — secondary text on night (8.92:1) */
  --gold:       #c8a860;  /* SAMPLED — deck gold (image21 census #c8a860/#d0b068) — 8.10:1 on --night */
  --gold-deep:  #b08848;  /* SAMPLED — deck gold shadow tone (image21 #b08848) */
  --green:      #00b070;  /* SAMPLED — logo swirl (image3 census #00b070) — 6.54:1 on --night */
  --teal:       #00b0a0;  /* SAMPLED — logo swirl highlight (image3 #00b0a0) */
  --ink:        #121418;  /* OURS — text on gold buttons = --night */
  --paper:      #f4efe4;  /* OURS — light band ground (same value as --cream) */
  --ink-soft:   #4b4a45;  /* OURS — secondary text on paper (7.74:1) */
  --line:       #d9d2c3;  /* OURS — hairline on paper */
  --accent:     #c8a860;  /* OURS — alias kept for starter components = --gold */
  --paper-soft: #b9b4a8;  /* OURS — alias kept for starter components = --cream-soft */

  /* --- Type ---------------------------------------------------------------- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;  /* OURS — OFL, vendored */
  --font-text:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;  /* OURS — OFL, vendored */

  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --step-3: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --step-4: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);

  /* --- Spacing: OURS, 4px base --------------------------------------------- */
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2.5rem;
  --sp-6: 4rem;
  --sp-7: 6rem;

  --wrap: 1180px;

  /* --- Radius / border ------------------------------------------------------ */
  --radius: 14px;
  --radius-sm: 8px;
  --border: 1px solid var(--line);
  --border-dark: 1px solid var(--line-dark);
  --border-gold: 1px solid var(--gold-deep);

  /* --- Motion: OURS — pinned durations, see assets/js/main.js -------------- */
  --dur-fast: 180ms;
  --dur-med:  420ms;
  --dur-slow: 900ms;
  --ease: cubic-bezier(.16,.84,.32,1);
}