/* base.css — design tokens, reset, typography
 *
 * Palette philosophy (after "feels monotone" feedback):
 *   • Avoid pure black / pure white — dark uses off-black charcoal,
 *     light uses warm parchment (#faf8f3, Anthropic-ish).
 *   • Single accent (blue) for links / primary CTA stays — but each
 *     suite gets its own per-category color, surfaced on the card head,
 *     letter chip, and the featured #1 row.
 *   • Type pairs serif headline + system sans body for editorial feel.
 */

:root {
  /* ── Dark theme (default) ─────────────────────────────── */
  --bg:           #0b0c10;
  --bg-elev:      #14161c;
  --bg-elev-2:    #1c1f27;
  --bg-tinted:    #181a22;            /* slightly cooler tint for hero */
  --border:       #2a2d36;
  --border-soft:  #20232b;

  --fg:           #d4d4d8;
  --fg-strong:    #f4f4f5;
  --fg-muted:     #a1a1aa;
  --fg-faint:     #71717a;

  --accent:       #93c5fd;             /* link color — readable on bg */
  --accent-2:     #3b82f6;             /* primary button / strong link */
  --accent-3:     #1e3a8a;             /* deep blue — fallback header */
  --accent-soft:  rgba(59, 130, 246, 0.14);
  --on-accent:    #ffffff;

  --good:         #34d399;
  --warn:         #fbbf24;
  --bad:          #fb7185;

  --gold:         #f5b50a;
  --silver:       #c2c2c8;
  --bronze:       #d4844a;

  /* Per-suite category colors (chosen perceptually distinct, deep
     enough that --on-accent white reads cleanly on top). */
  --suite-A: #4f6bed;   /* cobalt — Single-chip throughput */
  --suite-B: #7c4ddb;   /* violet — Multi-chip throughput */
  --suite-C: #14b8a6;   /* teal — Quantization efficiency */
  --suite-D: #d97757;   /* terracotta — Interactive latency */
  --suite-E: #16a34a;   /* emerald — Scaling efficiency */
  --suite-F: #db2777;   /* rose — Edge / low-power */
  --suite-G: #6366f1;   /* indigo — Sustained load */

  /* Vendor colour table now lives in data.js (`VENDOR_COLORS`) and is
   * injected at runtime as `[data-vendor="<name>"] { --vendor-color: ... }`
   * — adding a new vendor is one line in JS instead of 70 lines spread
   * across 6 CSS files.  Components keep consuming `var(--vendor-color)`. */

  /* Card shadow (soft on dark) */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-lift: 0 8px 24px -8px rgba(0, 0, 0, 0.55);

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Layout */
  --max-w:  1200px;
  --gap:    1rem;
  --gap-lg: 1.5rem;

  /* Type — single sans family used everywhere; mono is kept only for
     the `.mono` utility class and for the optional `font-variant-numeric`
     tabular figures.  Serif token removed (was inconsistent feedback). */
  --font-sans:  -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: dark;
}

/* ── Light theme (auto, follows OS) ───────────────────── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:          #faf8f3;            /* warm parchment, not pure white */
    --bg-elev:     #ffffff;
    --bg-elev-2:   #f3efe6;
    --bg-tinted:   #f5f1e8;
    --border:      #e6e1d4;
    --border-soft: #efeadd;

    --fg:          #44403c;
    --fg-strong:   #1c1917;
    --fg-muted:    #78716c;
    --fg-faint:    #a8a29e;

    --accent:      #2563eb;
    --accent-2:    #2563eb;
    --accent-3:    #1e40af;
    --accent-soft: rgba(37, 99, 235, 0.10);
    --on-accent:   #ffffff;

    --good:        #15803d;
    --warn:        #b45309;
    --bad:         #b91c1c;

    --gold:        #b8860b;
    --silver:      #6b7280;
    --bronze:      #b45a30;

    /* Suite colors — slight darken for white bg so white text on the
       filled header keeps WCAG AA. */
    --suite-A: #3b5bdb;
    --suite-B: #6d28d9;
    --suite-C: #0f766e;
    --suite-D: #c2410c;
    --suite-E: #15803d;
    --suite-F: #be185d;
    --suite-G: #4338ca;

    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
    --shadow-lift: 0 8px 24px -10px rgba(15, 23, 42, 0.14);

    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  isolation: isolate;
}
/* Ambient page-top wash — soft multi-stop radial that fades into the
   page background.  Pinned to the top of the document (absolute, not
   fixed) so it scrolls away with the hero; no rounded clip, no hard
   edge. */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 720px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 80% at 12% 0%, color-mix(in srgb, var(--suite-A) 13%, transparent), transparent 70%),
    radial-gradient(55% 70% at 90% -4%, color-mix(in srgb, var(--suite-D) 11%, transparent), transparent 65%),
    radial-gradient(70% 55% at 50% 0%,  color-mix(in srgb, var(--suite-B) 6%,  transparent), transparent 75%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 100%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font-family: inherit;
  cursor: pointer;
}

/* Keyboard focus ring.  We rely on `:focus-visible` so mouse users
   don't see the ring on click; tab navigation gets a two-layer halo:
   a 2px solid accent outline (the crisp boundary) plus a 4px
   translucent box-shadow ring underneath (the "halo" that survives
   busy backgrounds — hero radial gradients, suite-color-tinted rows,
   in-basket banners — where a single 2px line gets lost).
   `outline-offset: 2px` keeps the line clear of rounded corners,
   while the halo uses `0 0 0 4px` so it traces the element's own
   shape (including any border-radius) without needing per-element
   tuning.  `[tabindex="-1"]:focus-visible` is suppressed because we
   use that pattern for programmatic focus targets (modal panel) where
   the focus is intentional, not a keyboard navigation step. */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: inherit;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent);
}
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
.btn:focus-visible,
.copy-btn:focus-visible {
  outline-offset: 2px;
}
/* Pills with their own border and tight radius look better with the
   ring snugged in tighter — anything with a `*-pill` suffix opts in.
   Halo width also dialled down so it doesn't dwarf the pill itself. */
.rk-suite-pill:focus-visible,
.rk-facet-pill:focus-visible,
.scn-suite-letter:focus-visible {
  outline-offset: 1px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
/* Table rows: `<tr>` doesn't render a box-shadow reliably across the
   td borders, and the halo would clip mid-row when the table is in
   `border-collapse: collapse` mode (which the data-table is).  Drop
   the halo for rows so users still get the crisp 2px outline without
   a chopped-off ghost ring. */
tr:focus-visible { box-shadow: none; }

::selection { background: var(--accent-soft); color: var(--fg-strong); }

/* Scrollbar (webkit only) */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

/* Utility */
.muted     { color: var(--fg-muted); }
.faint     { color: var(--fg-faint); }
.mono      { font-family: var(--font-mono); }
.tnum      { font-variant-numeric: tabular-nums; }
.text-xs   { font-size: 0.75rem; }
.text-sm   { font-size: 0.85rem; }
.text-lg   { font-size: 1.1rem; }
.text-xl   { font-size: 1.35rem; }
.text-2xl  { font-size: 1.8rem; }
.bold      { font-weight: 600; }
.no-wrap   { white-space: nowrap; }
.hide-mobile { /* set in layout.css responsive block */ }

/* ── Editorial eyebrow ──────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
}