/* ==========================================================================
   BotPlaza — Design tokens + base styles  (v2.0 · dark by default)
   Plain CSS, no build step. Load fonts in <head> first:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&display=swap" rel="stylesheet">

   Two colour sets:
   · UI (dark)  --sa-bg / --sa-surface / --sa-text / --sa-line / --sa-accent …
   · Print      --sa-paper / --sa-ink / --sa-rule / --sa-print-* — ONLY for the
                light "paper" output previews (.np newspaper, .pv-doc sheets)
                that glow on the dark page. Never use print tokens for UI.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---- UI: surfaces (deep warm charcoal, lifted in steps) ---- */
  --sa-bg:           #121110;  /* page background */
  --sa-bg-2:         #181614;  /* alternate band, footer */
  --sa-surface:      #1C1A17;  /* cards, search field, nav */
  --sa-surface-2:    #25221E;  /* chips, hover fills, preview stage */
  --sa-surface-3:    #2F2B26;  /* pressed / selected, secondary buttons */

  /* ---- UI: text (warm off-white) ---- */
  --sa-text:         #F4EEE4;  /* headings, primary text */
  --sa-text-2:       #CBC3B6;  /* body, taglines */
  --sa-text-3:       #9C9386;  /* meta, captions (AA on every surface) */
  --sa-text-4:       #5F584F;  /* decorative ONLY: dashed borders, disabled icons */

  /* ---- UI: lines ---- */
  --sa-line:         #2C2823;  /* hairlines, card borders */
  --sa-line-2:       #3B362F;  /* stronger dividers, chip borders */
  --sa-line-field:   #6F675C;  /* form-field borders: 3.4:1 on bg (WCAG 1.4.11) */

  /* ---- UI: accent (Ember) — one accent, used sparingly ---- */
  --sa-accent:       #F08A68;  /* links, italic keyword, primary CTA fill, focus */
  --sa-accent-hover: #F6A487;
  --sa-on-accent:    #1A0F0A;  /* text on accent fills */
  --sa-accent-soft:  #3A211A;  /* tinted backgrounds (featured tag) */

  /* ---- UI: support ---- */
  --sa-gold:         #E2B65E;  /* rating star */
  --sa-green:        #86C9A0;  /* verified, success */
  --sa-green-soft:   #1E3328;
  --sa-blue:         #93B6DC;  /* info */
  --sa-focus:        #F08A68;

  /* ---- Print: light paper objects (previews) ---- */
  --sa-paper:        #FAF7F2;
  --sa-paper-2:      #F3EEE5;
  --sa-sheet:        #FFFDF9;  /* preview document sheet */
  --sa-newsprint:    #F6F1E7;
  --sa-ink:          #1B1915;
  --sa-ink-2:        #4A453D;
  --sa-ink-3:        #6B6459;
  --sa-ink-4:        #A39B8E;  /* decorative only */
  --sa-rule:         #E5DED2;
  --sa-rule-ink:     #1B1915;
  --sa-print-accent:      #8E2F1C;  /* oxblood: readable on paper (7.6:1) */
  --sa-print-accent-ink:  #74241A;
  --sa-print-accent-soft: #F4E5DE;
  --sa-print-green:       #2F5D46;
  --sa-print-green-soft:  #E3EDE6;
  --sa-print-blue:        #2E4C6D;
  --sa-print-gold:        #8A6100;

  /* ---- Typography ---- */
  --sa-font-display: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sa-font-text:    "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sa-font-ui:      "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sa-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale: size / line-height / tracking */
  --sa-fs-display:   clamp(2.75rem, 1.5rem + 4.4vw, 5.25rem); /* 44 → 84 */
  --sa-lh-display:   0.98;
  --sa-ls-display:   -0.02em;
  --sa-fs-h2:        clamp(2rem, 1.6rem + 1.2vw, 2.75rem);    /* 32 → 44 */
  --sa-lh-h2:        1.05;
  --sa-fs-h3:        1.625rem;  /* 26 — card titles */
  --sa-lh-h3:        1.1;
  --sa-fs-lead:      1.25rem;   /* 20 — the one hero line */
  --sa-lh-lead:      1.45;
  --sa-fs-body:      1rem;      /* 16 */
  --sa-lh-body:      1.55;
  --sa-fs-sm:        0.9375rem; /* 15 — taglines, UI */
  --sa-fs-xs:        0.8125rem; /* 13 — meta (never smaller for UI text) */
  --sa-fs-eyebrow:   0.75rem;   /* 12 uppercase */
  --sa-ls-eyebrow:   0.14em;

  /* ---- Spacing (4px base) ---- */
  --sa-space-1: 4px;  --sa-space-2: 8px;  --sa-space-3: 12px; --sa-space-4: 16px;
  --sa-space-5: 24px; --sa-space-6: 32px; --sa-space-7: 48px; --sa-space-8: 64px;
  --sa-space-9: 96px; --sa-space-10: 128px;
  --sa-section:  clamp(64px, 3rem + 5vw, 120px);
  --sa-gutter:   clamp(20px, 4vw, 48px);
  --sa-container: 1240px;

  /* ---- Sizing: tap targets ---- */
  --sa-tap:     44px;  /* minimum for every control */
  --sa-tap-lg:  56px;  /* hero search, primary CTA */

  /* ---- Radii ---- */
  --sa-radius-xs:   2px;   /* paper objects */
  --sa-radius-sm:   8px;
  --sa-radius-md:   12px;  /* buttons, inputs */
  --sa-radius-lg:   18px;  /* cards */
  --sa-radius-xl:   28px;  /* hero stage, dialogs */
  --sa-radius-pill: 999px;

  /* ---- Borders ---- */
  --sa-border:        1px solid var(--sa-line);
  --sa-border-strong: 1px solid var(--sa-line-2);

  /* ---- Shadows (dark UI: depth from darkness + a faint top highlight) ---- */
  --sa-highlight: inset 0 1px 0 rgba(255,240,220,.05);
  --sa-shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --sa-shadow-md: 0 2px 6px rgba(0,0,0,.35), 0 16px 40px -12px rgba(0,0,0,.6);
  --sa-shadow-lg: 0 24px 64px -16px rgba(0,0,0,.75);
  /* paper on dark: contact shadow + deep drop + warm ember-tinted glow */
  --sa-shadow-paper: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -12px rgba(0,0,0,.7), 0 0 80px -10px rgba(240,170,120,.16);
  --sa-glow: radial-gradient(60% 55% at 50% 45%, rgba(240,160,110,.16), rgba(240,160,110,0) 70%);

  /* ---- Motion ---- */
  --sa-ease: cubic-bezier(.2,.7,.2,1);
  --sa-dur-fast: 120ms;
  --sa-dur: 220ms;

  /* Breakpoints (reference): 480 · 640 · 900 · 1100 · 1440 */
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--sa-bg); color: var(--sa-text-2);
  font-family: var(--sa-font-ui); font-size: var(--sa-fs-body); line-height: var(--sa-lh-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: var(--sa-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sa-accent-hover); }
::selection { background: var(--sa-accent); color: var(--sa-on-accent); }
:focus-visible { outline: 2px solid var(--sa-focus); outline-offset: 3px; border-radius: 6px; }
.sa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sa-skip { position: absolute; left: -9999px; top: 12px; z-index: 100; }
.sa-skip:focus { left: 12px; }

.sa-container { width: 100%; max-width: calc(var(--sa-container) + var(--sa-gutter) * 2); margin-inline: auto; padding-inline: var(--sa-gutter); }

/* Type roles */
.sa-display { font-family: var(--sa-font-display); font-weight: 400; font-size: var(--sa-fs-display); line-height: var(--sa-lh-display); letter-spacing: var(--sa-ls-display); color: var(--sa-text); text-wrap: balance; }
.sa-display em, .sa-h2 em { font-style: italic; color: var(--sa-accent); }
.sa-h2 { font-family: var(--sa-font-display); font-weight: 400; font-size: var(--sa-fs-h2); line-height: var(--sa-lh-h2); letter-spacing: -0.01em; color: var(--sa-text); text-wrap: balance; }
.sa-h3 { font-family: var(--sa-font-display); font-weight: 400; font-size: var(--sa-fs-h3); line-height: var(--sa-lh-h3); color: var(--sa-text); }
.sa-lead { font-family: var(--sa-font-text); font-size: var(--sa-fs-lead); line-height: var(--sa-lh-lead); color: var(--sa-text-2); }
.sa-meta { font-size: var(--sa-fs-xs); line-height: 1.4; color: var(--sa-text-3); }
.sa-eyebrow { font: 600 var(--sa-fs-eyebrow)/1 var(--sa-font-ui); letter-spacing: var(--sa-ls-eyebrow); text-transform: uppercase; color: var(--sa-text-3); }

/* ==========================================================================
   Buttons — every size ≥ 44px tall
   ========================================================================== */
.sa-btn {
  --_h: var(--sa-tap);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--_h); padding: 0 20px;
  font: 600 15px/1 var(--sa-font-ui); letter-spacing: -0.005em;
  border-radius: var(--sa-radius-md); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background var(--sa-dur-fast) var(--sa-ease), border-color var(--sa-dur-fast) var(--sa-ease), color var(--sa-dur-fast) var(--sa-ease), transform var(--sa-dur-fast) var(--sa-ease);
}
.sa-btn:active { transform: translateY(1px); }
.sa-btn--accent    { background: var(--sa-accent); color: var(--sa-on-accent); }
.sa-btn--accent:hover { background: var(--sa-accent-hover); color: var(--sa-on-accent); }
.sa-btn--primary   { background: var(--sa-text); color: var(--sa-bg); }
.sa-btn--primary:hover { background: #FFFFFF; color: var(--sa-bg); }
.sa-btn--secondary { background: var(--sa-surface-2); color: var(--sa-text); border-color: var(--sa-line-2); box-shadow: var(--sa-highlight); }
.sa-btn--secondary:hover { background: var(--sa-surface-3); color: var(--sa-text); border-color: var(--sa-text-4); }
.sa-btn--ghost     { background: transparent; color: var(--sa-text); }
.sa-btn--ghost:hover { background: var(--sa-surface-2); color: var(--sa-text); }
.sa-btn--lg { --_h: var(--sa-tap-lg); padding: 0 26px; font-size: 16px; }
.sa-btn--icon { width: var(--_h); padding: 0; }
.sa-btn[disabled], .sa-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ==========================================================================
   Tags · badges · chips · inputs
   ========================================================================== */
.sa-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; font: 500 12.5px/1 var(--sa-font-ui); color: var(--sa-text-2); background: var(--sa-surface-2); border-radius: var(--sa-radius-pill); white-space: nowrap; }
.sa-tag--accent { color: var(--sa-accent); background: var(--sa-accent-soft); }
.sa-badge { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; font: 600 11px/1 var(--sa-font-ui); letter-spacing: .08em; text-transform: uppercase; border-radius: 6px; color: var(--sa-text); border: 1px solid var(--sa-line-2); }
.sa-badge--verified { color: var(--sa-green); border-color: currentColor; }
.sa-badge--example  { color: var(--sa-text-3); border: 1px dashed var(--sa-text-4); }

.sa-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--sa-tap); padding: 0 18px;
  font: 500 15px/1 var(--sa-font-ui); color: var(--sa-text-2);
  background: var(--sa-surface); border: var(--sa-border-strong); border-radius: var(--sa-radius-pill);
  cursor: pointer; white-space: nowrap; transition: background var(--sa-dur-fast), color var(--sa-dur-fast), border-color var(--sa-dur-fast);
}
.sa-chip:hover { color: var(--sa-text); border-color: var(--sa-text-4); background: var(--sa-surface-2); }
.sa-chip[aria-pressed="true"] { background: var(--sa-text); border-color: var(--sa-text); color: var(--sa-bg); }
.sa-chip__n { font-size: 12.5px; color: var(--sa-text-3); font-variant-numeric: tabular-nums; }
.sa-chip[aria-pressed="true"] .sa-chip__n { color: #4A453D; }

.sa-input {
  min-height: var(--sa-tap); width: 100%; padding: 0 16px;
  font: 400 16px/1 var(--sa-font-ui); color: var(--sa-text);   /* 16px: no iOS zoom */
  background: var(--sa-surface); border: 1px solid var(--sa-line-field); border-radius: var(--sa-radius-md);
}
.sa-input::placeholder { color: var(--sa-text-3); }
.sa-input:focus { outline: none; border-color: var(--sa-accent); box-shadow: 0 0 0 4px rgba(240,138,104,.18); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}