/* ==========================================================================
   theme.css — the entire brand, in one file.

   main.css never names a colour, a font, or a radius. It only reads the
   tokens below. So a rebrand is an edit to THIS FILE and nothing else:
   swap the values, reload, done. Do not add component rules here.

   Current theme: "Editorial Cream".
   Warm paper ground, near-black serif display, and a per-page accent taken
   from the drink itself — every recipe in the app carries a colour hex, so
   the Aviation page is violet and the Negroni page is red-amber, with no
   extra artwork. `--accent` is overridden inline per page by build_site.py.
   ========================================================================== */

:root {
  /* --- ground & ink ----------------------------------------------------- */
  --paper:        #FBF7F0;   /* page background */
  --paper-2:      #F4EEE3;   /* sunken bands, table stripes */
  --surface:      #FFFFFF;   /* cards */
  --ink:          #16130F;   /* headings */
  --ink-2:        #3D362D;   /* body copy */
  --muted:        #786D5E;   /* captions, meta */
  --rule:         #E6DCCB;   /* hairlines */
  --rule-strong:  #D3C5AE;

  /* --- accent ----------------------------------------------------------- */
  /* Brass default. Per-page, build_site.py sets --accent to the drink or
     ingredient colour, so this value is only ever seen on generic pages. */
  --accent:       #A8763E;
  --accent-ink:   #FFFFFF;   /* text that sits ON the accent */
  --accent-soft:  color-mix(in srgb, var(--accent) 12%, var(--paper));
  --accent-line:  color-mix(in srgb, var(--accent) 38%, var(--rule));

  /* --- semantic --------------------------------------------------------- */
  --pro:          #7B5BD6;   /* Pro-only marker */
  --free:         #2E7D5B;   /* ingredient you have */
  --miss:         #C0392B;   /* ingredient you are missing */

  /* --- type ------------------------------------------------------------- */
  /* One web font only. The body stack is native on every target device, so
     the page paints before the network answers. */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --display-weight: 600;
  --display-tracking: -0.021em;
  --body-tracking: -0.005em;

  /* Fluid scale. clamp() means no breakpoint ever restates a font size. */
  --fs-display: clamp(2.4rem, 1.35rem + 4.4vw, 4.15rem);
  --fs-h1:      clamp(2rem,   1.35rem + 2.6vw, 3rem);
  --fs-h2:      clamp(1.45rem, 1.2rem + 1.05vw, 1.95rem);
  --fs-h3:      clamp(1.1rem, 1.02rem + 0.36vw, 1.3rem);
  --fs-lead:    clamp(1.06rem, 0.99rem + 0.32vw, 1.24rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.795rem;

  /* --- space & shape ---------------------------------------------------- */
  --wrap:       1180px;
  --wrap-prose: 68ch;
  --gutter:     clamp(1.15rem, 0.7rem + 2vw, 2.5rem);
  --section-y:  clamp(3.2rem, 2rem + 5vw, 6rem);

  --r-sm: 7px;
  --r:    12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(28, 22, 14, .05),
               0 2px 8px rgba(28, 22, 14, .04);
  --shadow:    0 2px 4px rgba(28, 22, 14, .05),
               0 12px 32px -8px rgba(28, 22, 14, .12);
  --shadow-lg: 0 4px 8px rgba(28, 22, 14, .06),
               0 28px 64px -16px rgba(28, 22, 14, .20);

  --ease: cubic-bezier(.32, .72, 0, 1);
}

/* --------------------------------------------------------------------------
   Dark mode.
   The reader's OS decides. Only tokens are redefined — never a component.
   The accent stays the drink's own colour, so it is lifted rather than
   replaced, or a dark violet drink would vanish into the ground.
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #14120F;
    --paper-2:     #1C1915;
    --surface:     #1F1B17;
    --ink:         #F6F1E8;
    --ink-2:       #D9D0C2;
    --muted:       #9C907F;
    --rule:        #302A23;
    --rule-strong: #443B31;

    --accent-ink:  #14120F;
    --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--paper));
    --accent-line: color-mix(in srgb, var(--accent) 45%, var(--rule));

    --pro:  #A48CF0;
    --free: #5FBF93;
    --miss: #F0776A;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow:    0 2px 4px rgba(0, 0, 0, .35), 0 12px 32px -8px rgba(0, 0, 0, .55);
    --shadow-lg: 0 4px 8px rgba(0, 0, 0, .4),  0 28px 64px -16px rgba(0, 0, 0, .65);
  }
}

/* Explicit override, both directions, so a future toggle works without
   touching main.css. */
:root[data-theme="dark"] {
  --paper: #14120F; --paper-2: #1C1915; --surface: #1F1B17;
  --ink: #F6F1E8; --ink-2: #D9D0C2; --muted: #9C907F;
  --rule: #302A23; --rule-strong: #443B31;
  --accent-ink: #14120F;
  --accent-soft: color-mix(in srgb, var(--accent) 20%, var(--paper));
  --accent-line: color-mix(in srgb, var(--accent) 45%, var(--rule));
  --pro: #A48CF0; --free: #5FBF93; --miss: #F0776A;
}