/* ========================================================================
   Bottom Pub Co-op — Design Tokens
   Warm vernacular Tasmanian × editorial. Three modes: paper / cream / dark.
   ======================================================================== */

:root {
  /* ---- Type families ---------------------------------------------------- */
  --font-display: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body:    "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Type scale (older-skew AAA: nothing below 17px in body copy) ----- */
  --t-mono-xs:  0.75rem;   /* 12 — labels only, with tracking */
  --t-mono-sm:  0.8125rem; /* 13 — meta */
  --t-body-sm:  1.0625rem; /* 17 — caption, footer */
  --t-body:     1.25rem;   /* 20 — default body */
  --t-body-lg:  1.4375rem; /* 23 — lede */
  --t-quote:    1.625rem;  /* 26 — pull quote */
  --t-h4:       1.5rem;    /* 24 */
  --t-h3:       2rem;      /* 32 */
  --t-h2:       clamp(2.25rem, 4vw, 3rem);   /* 36 → 48 */
  --t-h1:       clamp(3rem,   6vw, 4.5rem);  /* 48 → 72 */
  --t-display:  clamp(3.5rem, 9vw, 8rem);    /* hero */

  /* ---- Spacing scale (8pt base, with two finer steps) ------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 144px;

  /* ---- Layout ----------------------------------------------------------- */
  --measure:       38rem;  /* 608px — comfortable reading */
  --measure-narrow:30rem;
  --measure-wide:  72rem;
  --gutter:        var(--s-5);
  --page-pad:      clamp(20px, 4vw, 56px);

  /* ---- Lines ------------------------------------------------------------ */
  --rule-hair:  1px;
  --rule-thin:  1.5px;
  --rule-med:   2px;
  --rule-thick: 4px;

  /* ---- Motion ----------------------------------------------------------- */
  --ease:        cubic-bezier(.2, .7, .2, 1);
  --dur-quick:   180ms;
  --dur-base:    320ms;
  --dur-slow:    640ms;

  /* ---- Focus ring (visible against any mode) ---------------------------- */
  --focus-width: 3px;
  --focus-offset: 3px;
}

/* ========================================================================
   Modes — paper (default) · cream · dark
   ======================================================================== */

:root,
[data-mode="paper"] {
  --paper:        #F4ECDD;  /* warm off-white, like uncoated stock */
  --paper-2:      #ECE2CC;  /* sectional band */
  --paper-deep:   #DFD3B7;  /* deepest paper */
  --ink:          #15110D;  /* warm near-black */
  --ink-2:        #3F362B;  /* secondary text */
  --ink-3:        #6E624D;  /* meta, muted */
  --rule:         #B6A685;  /* primary rule */
  --rule-soft:    #D4C7A9;  /* soft divider */
  --accent:       #6B2618;  /* leatherwood oxblood */
  --accent-2:     #9A4127;  /* warmer red, large surfaces */
  --field:        #FBF6EB;  /* form field bg */
  --field-rule:   #8E7E5F;
  --selection-bg: #6B2618;
  --selection-fg: #F4ECDD;
  --shadow:       0 1px 0 rgba(21,17,13,.04), 0 12px 28px -18px rgba(21,17,13,.18);
  color-scheme: light;
}

[data-mode="cream"] {
  --paper:        #E5D6B6;
  --paper-2:      #D8C698;
  --paper-deep:   #CDB87F;
  --ink:          #1A130A;
  --ink-2:        #43361F;
  --ink-3:        #6E5B3A;
  --rule:         #9F8A5E;
  --rule-soft:    #B7A476;
  --accent:       #561A0C;
  --accent-2:     #88321A;
  --field:        #ECDFC0;
  --field-rule:   #82704A;
  --selection-bg: #561A0C;
  --selection-fg: #E5D6B6;
  --shadow:       0 1px 0 rgba(26,19,10,.06), 0 14px 28px -18px rgba(26,19,10,.22);
  color-scheme: light;
}

[data-mode="dark"] {
  --paper:        #15110D;  /* warm bottle-night */
  --paper-2:      #1D1812;
  --paper-deep:   #261F18;
  --ink:          #EFE5CE;  /* warm cream foreground */
  --ink-2:        #BCAF92;
  --ink-3:        #837662;
  --rule:         #3A2F23;
  --rule-soft:    #2A2219;
  --accent:       #D4A574;  /* aged brass */
  --accent-2:     #B58655;
  --field:        #1E1812;
  --field-rule:   #564631;
  --selection-bg: #D4A574;
  --selection-fg: #15110D;
  --shadow:       0 1px 0 rgba(0,0,0,.4), 0 18px 40px -20px rgba(0,0,0,.7);
  color-scheme: dark;
}

/* Smooth mode crossfade ---------------------------------------------------- */
html { transition: background-color var(--dur-base) var(--ease),
                   color            var(--dur-base) var(--ease); }
body, .surface, .rule, .field, .btn, .tag, .pull, .placeholder, .stage-pill,
.disclosure, .nav-link, .swatch, .footnote {
  transition: background-color var(--dur-base) var(--ease),
              color            var(--dur-base) var(--ease),
              border-color     var(--dur-base) var(--ease),
              box-shadow       var(--dur-base) var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  html, body, * { transition: none !important; animation: none !important; }
}