/* =============================================================
   Fiction Drinks — Design Tokens
   Type · Color · Spacing · Radii
   Intentionally narrow palette. Color = images. Ink = type.
   ============================================================= */

/* ---------- Fonts ----------
   Font-face declarations live in fonts.css. Consumers should <link>
   fonts.css directly (alongside this file) so the typography is
   discoverable at one level of indirection. We still @import it here
   as a convenience for files that only know about this stylesheet. */
@import url("fonts.css");

:root {
  /* ---------- Font stacks ---------- */
  --font-display:  "Brivela", "Georgia", serif;             /* logo, power words, italic phrases */
  --font-sans:     "Authentic Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* body */
  --font-sans-mid: "Authentic Sans Mid", "Authentic Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* sub-display, editorial headings */
  --font-sans-loud:"Authentic Sans Loud", "Authentic Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; /* loud display */
  --font-mono:     "AOT Serial Mono", "GC Vensca Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace; /* nav, meta, caption */

  /* ---------- Base ink palette (the only "color" the brand has) ---------- */
  --ink:        #0e0e0e;   /* near-black ink, primary text and lines */
  --ink-soft:   #1f1d1b;   /* secondary ink */
  --ink-faint:  #6c6760;   /* tertiary / muted */
  --ink-rule:   #1f1d1b;   /* hairlines and dividers */
  --strike:     #3a3530;   /* desaturated grey for strikethroughs */

  /* ---------- Paper / surfaces ---------- */
  /* Stone register — cool, architectural, gallery-wall (Rori / Loewe).
     Base nudged to ~97.5% L so it works as a default BG anywhere;
     deep/highlight kept assertive so hover/pressed/selection still read.
     The earlier warm parchment scale (#f8f5ec / #ece8db / #ddd7c3) is
     archived in /history/colors-paper-warm.html. */
  --paper:      #ffffff;   /* primary digital surface (storefront) */
  --paper-warm: #f8f8f5;   /* stone — editorial / default BG */
  --paper-deep: #e6e5df;   /* stone-deep · hover / pressed */
  --highlight:  #d4d2c9;   /* stone-hi · selection */

  /* ---------- Reverse / "ink mode" ---------- */
  --on-ink:        #ffffff;
  --on-ink-faint:  rgba(255, 255, 255, 0.55);
  --on-ink-rule:   rgba(255, 255, 255, 0.18);

  /* ---------- Functional aliases ---------- */
  --bg:            var(--paper);
  --surface:       var(--paper);
  --surface-deep:  var(--paper-deep);
  --fg:            var(--ink);
  --fg-secondary:  var(--ink-soft);
  --fg-muted:      var(--ink-faint);
  --border:        var(--ink);
  --border-faint:  rgba(14, 14, 14, 0.18);

  /* ---------- The ONE chromatic accent ---------- */
  /* Used sparingly: "never" callouts, rare emphasis, hand-marked underlines.
     Borrowed from the cacao-can litho palette (warm ochre / spent gold). */
  --accent-ochre:  #d68a1a;

  /* ---------- State colors ----------
     Approved additions for the commerce layer. The brand is deliberately
     near-monochrome, so these are used ONLY for genuine system states —
     never decoratively. Error/warning/success follow the universal
     red/amber/green convention (tuned warm/muted to sit beside ink + ochre,
     never neon). Warning sits near error in hue (the slot is squeezed between
     error-red and sale-ochre), so status UI MUST pair tone with a shape/icon
     — warning=triangle, error=circle — never colour alone (WCAG 1.4.1).
     "Info" uses the neutral ink treatment, not a blue (no cool hue in-brand).
     The ochre accent is reserved for sale / markdown emphasis — a discount
     is not an error, and is never a warning. */
  --state-error:         #c12d20;   /* validation, declines, destructive confirm */
  --state-error-deep:    #9e2417;   /* error hover / pressed */
  --state-error-faint:   rgba(193, 45, 32, 0.08);
  --state-warning:       #c2540f;   /* burnt amber — caution / low-stock / non-blocking */
  --state-warning-deep:  #a8431a;   /* warning hover / pressed */
  --state-warning-faint: rgba(194, 84, 15, 0.10);
  --state-success:       #387b4e;   /* balanced green — save / order confirmations only */
  --state-success-faint: rgba(56, 123, 78, 0.11);
  --state-sale:          var(--accent-ochre);  /* sale / discount = ochre, not red */
  --state-disabled-fg:   rgba(14, 14, 14, 0.32);
  --state-disabled-bd:   rgba(14, 14, 14, 0.22);
  --state-disabled-bg:   var(--paper-deep);

  /* ---------- Spacing scale (4-base) ---------- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---------- Radii ---------- */
  /* Bias is square: corner-rounding is reserved for genuinely-rounded UX
     primitives (pills, swatches, avatars). Cards & buttons stay sharp. */
  --radius-none:   0px;
  --radius-soft:   2px;
  --radius-base:   4px;
  --radius-rounded:8px;     /* maximum allowed on a UI block */
  --radius-pill:   9999px;  /* pills and chips */

  /* ---------- Borders ---------- */
  --hairline:      1px solid var(--border);
  --hairline-thick:1.5px solid var(--border);
  --hairline-rule: 2px solid var(--border);

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(.2,.7,.2,1);
  --ease-cs:       cubic-bezier(0.5, 0, 0.5, 1);
  --t-quick:       120ms;
  --t-base:        220ms;
  --t-slow:        320ms;

  /* ---------- Layout ---------- */
  --container:     1440px;
  --nav-height:    64px;

  /* ---------- Type scale (digital, fluid) ---------- */
  --fs-micro:   10px;    /* meta-meta (nutrition table micro) */
  --fs-caption: 11px;    /* mono nav, meta labels (UPPERCASE 0.18em) */
  --fs-small:   13px;    /* small caps, fineprint */
  --fs-body:    15px;    /* default body — Authentic Sans 60 */
  --fs-body-lg: 18px;    /* editorial body */
  --fs-prose:   19px;    /* About-page long-form prose */
  --fs-lead:    22px;    /* lead paragraphs */
  --fs-h4:      clamp(20px, 2.4vw, 28px);
  --fs-h3:      clamp(28px, 3.4vw, 40px);
  --fs-h2:      clamp(36px, 5vw, 64px);
  --fs-h1:      clamp(48px, 8vw, 104px);
  --fs-display: clamp(64px, 12vw, 180px);    /* Brivela page-takers */

  /* ---------- Tracking ---------- */
  --tr-mono:     0.10em;   /* nav links, captions, buttons, meta — editorial */
  --tr-mono-wide:0.18em;   /* section markers (§ rhythm-device only) */
  --tr-display:  -0.025em; /* Brivela negative tracking */
  --tr-body:     0;

  /* ---------- Line height ---------- */
  --lh-tight:    0.86;     /* display */
  --lh-snug:     0.94;     /* editorial heading */
  --lh-prose:    1.55;     /* prose */
  --lh-body:     1.45;     /* default */
}

/* =============================================================
   Semantic element styles (opt-in via .fd-* classes; we don't
   reset global tags so this file is safe to drop into any page)
   ============================================================= */

.fd {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* — Display: Brivela, large, the brand mark and "power words" — */
.fd-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fg);
  margin: 0;
}
.fd-h1 {
  font-family: var(--font-sans-mid);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.022em;
  margin: 0;
}
.fd-h2 {
  font-family: var(--font-sans-mid);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 0;
}
.fd-h3 {
  font-family: var(--font-sans-mid);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -0.008em;
  margin: 0;
}
.fd-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: 1.2;
  margin: 0;
}
.fd-prose {
  font-family: var(--font-sans);
  font-size: var(--fs-prose);
  line-height: var(--lh-prose);
  max-width: 62ch;
  text-wrap: pretty;
}
.fd-prose p { margin: 0 0 1.1em; }
.fd-prose p:last-child { margin-bottom: 0; }

.fd-body { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); }
.fd-lead { font-family: var(--font-sans); font-size: var(--fs-lead); line-height: 1.4; }

/* — Mono / nav / meta: JetBrains Mono, uppercase, generous tracking — */
.fd-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg);
}
.fd-meta-faint { color: var(--fg-muted); }
.fd-marker {            /* "§ 01 OPENING" style */
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-mono-wide);
  text-transform: uppercase;
}

/* — Inline "power word" (Brivela inside running copy) — */
.fd-power {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.18em;
  line-height: 0.9;
  letter-spacing: -0.01em;
  vertical-align: -0.06em;
}

/* — Strikethrough (the "no nuts", "no alcohol" tag style) — */
.fd-struck {
  position: relative;
  display: inline-block;
  color: var(--fg-muted);
}
.fd-struck::after {
  content: "";
  position: absolute;
  left: -2%; right: -2%;
  top: 50%;
  height: 2.5px;
  background: var(--strike);
  transform: rotate(-2deg);
  transform-origin: left center;
}

/* — Smallcaps caption — */
.fd-smallcaps {
  font-family: var(--font-sans-mid);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--fs-small);
}

/* — Editorial nav-link (used in storefront header) — */
.fd-nav-link {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  position: relative;
  transition: opacity var(--t-quick) ease;
}
.fd-nav-link:hover {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

/* =============================================================
   Print-safe pairing (drop --bg / --fg into ink-on-paper-warm
   for print collateral, spec sheets, posters)
   ============================================================= */
.fd-paper-warm { --bg: var(--paper-warm); --surface: var(--paper-warm); background: var(--paper-warm); color: var(--fg); }
.fd-paper-deep { --bg: var(--paper-deep); --surface: var(--paper-deep); background: var(--paper-deep); color: var(--fg); }
.fd-ink-mode   { --bg: var(--ink); --surface: var(--ink); --fg: var(--on-ink); --fg-muted: var(--on-ink-faint); --border: var(--on-ink); --border-faint: var(--on-ink-rule); background: var(--ink); color: var(--on-ink); }