/* ============================================================
   BREWWW DESIGN SYSTEM — Colors & Type
   Import this file into any page to get the brand foundations.
   ============================================================ */

/* ---------- FONT FACES ---------- */

@font-face {
  font-family: "Geomanist";
  src: url("./fonts/geomanist-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("./fonts/geomanist-book.woff2") format("woff2");
  font-weight: 350;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("./fonts/geomanist-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("./fonts/geomanist-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("./fonts/geomanist-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("./fonts/geomanist-black.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geomanist";
  src: url("./fonts/geomanist-ultra.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "GT Ultra";
  src: url("./fonts/GT-Ultra-Standard-Ultra.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- TOKENS ---------- */

:root {
  /* ---- Brand core ----
     Palette finalised by client (see README). Inspired by editorial sites
     like Nory and Boring Amsterdam: most surfaces are carbon-black or soft-linen;
     bright colours are used sparingly as accents, stickers, or marketing blocks. */

  --brewww-linen:    #F3F0E8;  /* soft linen — primary light surface */
  --brewww-linen-2:  #E9E4D6;
  --brewww-linen-3:  #DCD4C0;

  --brewww-carbon:   #0F1C12;  /* carbon black (deep forest) — primary dark surface */
  --brewww-carbon-2: #15281A;
  --brewww-carbon-3: #1E3524;

  /* Accent palette — use sparingly, as small blocks / stickers / marketing. */
  --brewww-yellow:   #F8FF33;  /* electric yellow */
  --brewww-indigo:   #4D35C9;  /* bright indigo */
  --brewww-bubblegum:#FD87B4;  /* bubblegum tint */
  --brewww-chartreuse:#CFFF5E; /* chartreuse */

  /* Legacy aliases (keep old code working while we transition) */
  --brewww-cream:    var(--brewww-linen);
  --brewww-cream-2:  var(--brewww-linen-2);
  --brewww-cream-3:  var(--brewww-linen-3);
  --brewww-ink:      var(--brewww-carbon);
  --brewww-ink-2:    var(--brewww-carbon-2);
  --brewww-ink-3:    var(--brewww-carbon-3);
  --brewww-pink:     var(--brewww-bubblegum);
  --brewww-pink-dk:  #E66395;
  --brewww-lime:     var(--brewww-chartreuse);
  --brewww-cyan:     #8ED8FF;       /* retained soft cyan for sticker halos only */
  --brewww-blue:     var(--brewww-indigo);
  --brewww-purple:   var(--brewww-indigo);
  --brewww-magenta:  var(--brewww-bubblegum);
  --brewww-orange:   #F8FF33;        /* no orange — aliased to yellow */

  /* Semantic */
  --brewww-success:  #2E7D4F;
  --brewww-warning:  #E0B400;
  --brewww-danger:   #C02F2F;

  /* ---- Ink alphas (text on light surfaces) ---- */
  --brewww-ink-70:   rgba(15, 28, 18, 0.70);
  --brewww-ink-55:   rgba(15, 28, 18, 0.55);
  --brewww-ink-35:   rgba(15, 28, 18, 0.35);
  --brewww-ink-15:   rgba(15, 28, 18, 0.15);
  --brewww-ink-08:   rgba(15, 28, 18, 0.08);

  --brewww-paper:    #F3F0E8;
  --brewww-paper-70: rgba(243, 240, 232, 0.70);
  --brewww-paper-55: rgba(243, 240, 232, 0.55);
  --brewww-paper-35: rgba(243, 240, 232, 0.35);
  --brewww-paper-15: rgba(243, 240, 232, 0.15);
  --brewww-paper-08: rgba(243, 240, 232, 0.08);

  /* ---- Semantic tokens — LIGHT mode ---- */
  --bg:          var(--brewww-cream);
  --bg-elev-1:   #FFFFFF;
  --bg-elev-2:   var(--brewww-cream-2);
  --bg-inverse:  var(--brewww-ink);

  --fg1:         var(--brewww-ink);
  --fg2:         var(--brewww-ink-70);
  --fg3:         var(--brewww-ink-55);
  --fg-muted:    var(--brewww-ink-35);
  --fg-inverse:  var(--brewww-cream);

  --border:      var(--brewww-ink-15);
  --border-strong: var(--brewww-ink);
  --hairline:    var(--brewww-ink-08);

  --accent:      var(--brewww-pink);
  --accent-fg:   var(--brewww-ink);
  --accent-hover:var(--brewww-pink-dk);

  --success:     var(--brewww-success);
  --warning:     var(--brewww-warning);
  --danger:      var(--brewww-danger);

  /* ---- Type stack ---- */
  --font-sans:    "Geomanist", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: "GT Ultra", "Geomanist", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- Type scale (fluid-friendly, but mostly fixed — brand is confident, not dainty) ---- */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-28: 28px;
  --fs-32: 32px;
  --fs-40: 40px;
  --fs-48: 48px;
  --fs-64: 64px;
  --fs-88: 88px;
  --fs-120: 120px;

  /* ---- Spacing ---- */
  --sp-0:  0px;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---- Radii — deliberately small. Brand is grounded, not bubbly. ---- */
  --radius-0: 0px;
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-3: 8px;
  --radius-4: 10px;
  --radius-5: 18px;

  /* ---- Shadows — subtle, close to surface. No hard poster shadows. ---- */
  --shadow-0: 0 0 0 1px rgba(15, 28, 18, 0.06);                                         /* hairline */
  --shadow-1: 0 1px 2px rgba(15, 28, 18, 0.05), 0 1px 3px rgba(15, 28, 18, 0.06);       /* chips, inputs */
  --shadow-2: 0 2px 4px rgba(15, 28, 18, 0.04), 0 4px 10px rgba(15, 28, 18, 0.07);      /* cards, tiles */
  --shadow-3: 0 4px 8px rgba(15, 28, 18, 0.05), 0 12px 28px rgba(15, 28, 18, 0.10);     /* modals, popovers */
  --shadow-inset: inset 0 0 0 1px var(--border);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.7, 0, 0.3, 1);
  --dur-fast: 120ms;
  --dur-med: 220ms;
  --dur-slow: 360ms;
}

/* ---------- DARK SURFACE ---------- */
.brewww-dark {
  --bg:         var(--brewww-ink);
  --bg-elev-1:  var(--brewww-ink-2);
  --bg-elev-2:  var(--brewww-ink-3);
  --bg-inverse: var(--brewww-cream);

  --fg1:        var(--brewww-cream);
  --fg2:        var(--brewww-paper-70);
  --fg3:        var(--brewww-paper-55);
  --fg-muted:   var(--brewww-paper-35);
  --fg-inverse: var(--brewww-ink);

  --border:     var(--brewww-paper-15);
  --border-strong: var(--brewww-cream);
  --hairline:   var(--brewww-paper-08);

  --accent:     var(--brewww-yellow);
  --accent-fg:  var(--brewww-ink);
  --accent-hover: var(--brewww-lime);
}

/* ---------- SEMANTIC TYPOGRAPHY ---------- */

.brewww {
  font-family: var(--font-sans);
  color: var(--fg1);
  background: var(--bg);
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.brewww h1, .brewww .h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(48px, 7vw, 120px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  color: var(--fg1);
  margin: 0;
}

.brewww h2, .brewww .h2 {
  font-family: var(--font-sans);
  font-weight: 900;   /* geomanist ultra */
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
}

.brewww h3, .brewww .h3 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
}

.brewww h4, .brewww .h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
}

.brewww .eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg2);
}

.brewww p, .brewww .body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg1);
  text-wrap: pretty;
  margin: 0;
}

.brewww .lead {
  font-size: 20px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--fg1);
}

.brewww .small {
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg2);
}

.brewww .meta {
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg3);
  letter-spacing: 0.02em;
}

.brewww code, .brewww .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-elev-2);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-2);
  border: 1px solid var(--hairline);
}

.brewww a {
  color: var(--fg1);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
.brewww a:hover { color: var(--accent); }

/* ---------- UTILITIES ---------- */
.brewww-accent { color: var(--accent); }
.brewww-success { color: var(--success); }
.brewww-warning { color: var(--warning); }
.brewww-danger  { color: var(--danger); }