/* ==========================================================================
   BotPlaza — Design tokens + base styles  (v3.0 · cool dark, blue→violet accent)
   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 / --sa-gradient …
                ALL colour lives here; components.css / previews.css only read var(--sa-*).
   · 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 (near-black, cool gray steps) — v3 ---- */
  --sa-bg:           #0B0D14;  /* page background */
  --sa-bg-2:         #101219;  /* alternate band, footer, terminal bars */
  --sa-surface:      #15171F;  /* cards, search field, nav */
  --sa-surface-2:    #1C1F29;  /* chips, hover fills, preview stage */
  --sa-surface-3:    #252935;  /* pressed / selected, secondary buttons */
  --sa-term:         #07080D;  /* Bot view terminal panel */

  /* ---- UI: text (cool off-white) ---- */
  --sa-text:         #E8EAF2;  /* headings, primary text (12:1+ on every surface) */
  --sa-text-2:       #C3C8D6;  /* body, taglines (8.6:1+) */
  --sa-text-3:       #9AA3B8;  /* meta, captions (5.7:1+ — AA on every surface) */
  --sa-text-4:       #4A5063;  /* decorative ONLY: dashed borders, disabled icons */

  /* ---- UI: lines ---- */
  --sa-line:         rgba(255,255,255,0.08);  /* hairlines, card borders */
  --sa-line-2:       rgba(255,255,255,0.14);  /* stronger dividers, chip borders */
  --sa-line-field:   #5D6478;  /* form-field borders: 3:1+ on bg/surface (WCAG 1.4.11) */

  /* ---- UI: accent (blue → violet) ----
     Gradient ONLY on: the logo, primary buttons, links (underline), focus rings.
     Never on whole sections, badges or backgrounds. Text in accent uses the solid --sa-accent. */
  --sa-accent-from:  #6E8BFF;
  --sa-accent-to:    #A78BFA;
  --sa-gradient:     linear-gradient(135deg, var(--sa-accent-from), var(--sa-accent-to));
  --sa-accent:       #8B8CFF;  /* solid fallback: accent text, icons (5:1+ on every surface) */
  --sa-accent-hover: #A5A6FF;
  --sa-on-accent:    #0B0D14;  /* text on accent/gradient fills (6.3:1+) — never white */
  --sa-accent-soft:  #1E2142;  /* flat tint behind accent text (featured tag, Bot toggle) */
  --sa-focus:        #8B8CFF;  /* solid ring colour; gradient ring via .sa-focus-ring */

  /* ---- UI: support ---- */
  --sa-gold:         #E2C46E;  /* rating star */
  --sa-green:        #86C9A0;  /* verified, success */
  --sa-green-soft:   #17291F;
  --sa-blue:         #93B6DC;  /* info */
  --sa-violet:       #B9A6FF;  /* avatar tint */
  --sa-rose:         #DDA6C2;  /* avatar tint */

  /* ---- UI: overlays + code (Bot view, terminal previews) ---- */
  --sa-nav-bg:       rgba(11,13,20,.82);  /* sticky nav over content */
  --sa-scrim:        rgba(4,5,9,.72);     /* dialog backdrop */
  --sa-code:         #D5D9E4;  /* terminal body text */
  --sa-code-ln:      #4A5063;  /* line numbers (decorative) */
  --sa-code-key:     #E2C46E;  /* front-matter keys */
  --sa-code-str:     #86C9A0;  /* values / strings */
  --sa-code-link:    #93B6DC;  /* links */
  --sa-code-quote:   #B8BFCF;  /* > quotes */

  /* ---- Print: light paper objects (previews) — neutral cool white, reads as a printed page ---- */
  --sa-paper:        #F7F8FA;
  --sa-paper-2:      #EEF0F4;
  --sa-sheet:        #FDFDFE;  /* preview document sheet */
  --sa-newsprint:    #F4F5F7;
  --sa-ink:          #14161D;
  --sa-ink-2:        #3E4350;
  --sa-ink-3:        #5E6473;
  --sa-ink-4:        #9CA2B0;  /* decorative only */
  --sa-rule:         #DEE1E8;
  --sa-rule-ink:     #14161D;
  --sa-print-accent:      #3B3F9E;  /* indigo: readable on paper (7.7:1+) */
  --sa-print-accent-ink:  #2E3180;
  --sa-print-accent-soft: #E6E8FA;
  --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:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;  /* Google Font, loaded only on pages with Bot view */

  /* 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,255,255,.04);
  --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 (no coloured glow in v3) */
  --sa-shadow-paper: 0 1px 2px rgba(0,0,0,.5), 0 18px 40px -12px rgba(0,0,0,.7);
  --sa-glow: none;  /* v3: hero glow dropped */

  /* ---- 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-color: var(--sa-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sa-accent-hover); }
/* gradient underline for links in running text (the only gradient on text-level UI) */
:where(p, dd, figcaption, .sa-meta, .sa-hero__caption) > a:not([class]), a.sa-link {
  text-decoration: none; background: var(--sa-gradient) left bottom / 100% 1px no-repeat; padding-bottom: 2px; }
:where(p, dd, figcaption, .sa-meta, .sa-hero__caption) > a:not([class]):hover, a.sa-link:hover { background-size: 100% 2px; }
::selection { background: var(--sa-accent); color: var(--sa-on-accent); }
:focus-visible { outline: 2px solid var(--sa-focus); outline-offset: 3px; border-radius: 6px; }
/* gradient focus ring on buttons (2px ring drawn with a masked gradient border) */
.sa-btn:focus-visible { outline: none; position: relative; }
.sa-btn:focus-visible::after { content: ""; position: absolute; inset: -5px; border-radius: calc(var(--sa-radius-md) + 5px); padding: 2px; background: var(--sa-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); pointer-events: none; }
.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); }
/* primary + accent: the gradient fill, dark text (6.3:1+). Hover brightens, never changes hue. */
.sa-btn--primary, .sa-btn--accent { background: var(--sa-accent-from) var(--sa-gradient); color: var(--sa-on-accent); }
.sa-btn--primary:hover, .sa-btn--accent:hover { color: var(--sa-on-accent); filter: brightness(1.1); }
.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: var(--sa-text-4); }

.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 color-mix(in srgb, var(--sa-accent) 22%, transparent); }

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