/* ============================================================
   StudioBench — Design System
   Dark-first dev-tool aesthetic. 4px spacing grid.
   Tailwind (CDN) handles utilities; this file owns the tokens,
   base element resets, and reusable component classes.
   ============================================================ */

/* ── Design tokens ─────────────────────────────────────────── */
:root {
  /* colors */
  --sb-primary:    #0f172a;  /* navy-900  (page bg) */
  --sb-surface:    #1e293b;  /* navy-800  (sections) */
  --sb-card:       #334155;  /* navy-700  (cards) */
  --sb-accent:     #f59e0b;  /* amber-500 (CTAs, highlights) */
  --sb-accent-dk:  #d97706;  /* amber-600 (CTA hover) */
  --sb-accent2:    #06b6d4;  /* cyan-500  (links, info) */
  --sb-text:       #f1f5f9;  /* slate-100 */
  --sb-text-muted: #94a3b8;  /* slate-400 */
  --sb-success:    #22c55e;
  --sb-error:      #ef4444;
  --sb-border:     #475569;  /* navy-600 */

  /* spacing (4px grid) */
  --sp-xs: 4px;  --sp-sm: 8px;  --sp-md: 12px;
  --sp-lg: 16px; --sp-xl: 24px; --sp-2xl: 32px;

  /* radii */
  --r-card: 8px;
  --r-btn:  6px;
  --r-input:6px;

  /* type */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* light-mode override (optional, Phase 6) */
:root[data-theme="light"] {
  --sb-primary:    #f8fafc;
  --sb-surface:    #f1f5f9;
  --sb-card:       #ffffff;
  --sb-text:       #0f172a;
  --sb-text-muted: #64748b;
  --sb-border:     #cbd5e1;
}

/* ── Base ──────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  background: var(--sb-primary);
  color: var(--sb-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-sans); line-height: 1.2; }

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

code, .mono { font-family: var(--font-mono); font-size: 0.9em; }

::selection { background: color-mix(in srgb, var(--sb-accent) 40%, transparent); }

/* ── Buttons ───────────────────────────────────────────────── */
.sb-btn {
  display: inline-flex; align-items: center; gap: var(--sp-sm);
  padding: 10px 18px;
  border-radius: var(--r-btn);
  font-weight: 600; font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  user-select: none;
}
.sb-btn:active { transform: translateY(1px); }
.sb-btn-primary { background: var(--sb-accent); color: #0f172a; }
.sb-btn-primary:hover { background: var(--sb-accent-dk); color: #fff; text-decoration: none; }
.sb-btn-ghost {
  background: transparent; color: var(--sb-text);
  border-color: var(--sb-border);
}
.sb-btn-ghost:hover { border-color: var(--sb-accent); color: var(--sb-accent); text-decoration: none; }
.sb-btn-sm { padding: 6px 12px; font-size: 13px; }
.sb-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Cards ─────────────────────────────────────────────────── */
.sb-card {
  background: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-card);
}

/* ── Inputs ────────────────────────────────────────────────── */
.sb-input, .sb-select {
  width: 100%;
  background: var(--sb-primary);
  color: var(--sb-text);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-input);
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sb-input:focus, .sb-select:focus, .sb-textarea:focus {
  outline: none;
  border-color: var(--sb-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-accent) 25%, transparent);
}
.sb-textarea { resize: vertical; min-height: 96px; }
.sb-label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--sb-text-muted); margin-bottom: 6px;
  letter-spacing: .02em;
}
.sb-field { margin-bottom: var(--sp-lg); }

/* ── Badges ────────────────────────────────────────────────── */
.sb-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600;
  padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--sb-accent) 15%, transparent);
  color: var(--sb-accent);
  border: 1px solid color-mix(in srgb, var(--sb-accent) 35%, transparent);
  white-space: nowrap;
}
.sb-badge-muted {
  background: rgba(148,163,184,.12); color: var(--sb-text-muted);
  border-color: var(--sb-border);
}
.sb-badge-pro {
  background: color-mix(in srgb, var(--sb-accent) 18%, transparent);
  color: var(--sb-accent);
}

/* ── Tool page layout helpers ──────────────────────────────── */
.sb-tool-header {
  border-bottom: 1px solid var(--sb-border);
  background: var(--sb-surface);
}
.sb-result-box {
  background: var(--sb-primary);
  border: 1px solid var(--sb-border);
  border-radius: var(--r-card);
}
.sb-result-box.ok   { border-color: color-mix(in srgb, var(--sb-success) 50%, transparent); }
.sb-result-box.warn { border-color: color-mix(in srgb, var(--sb-accent) 60%, transparent); }
.sb-result-box.err  { border-color: color-mix(in srgb, var(--sb-error) 55%, transparent); }

.sb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sb-table th {
  text-align: left; font-weight: 600; color: var(--sb-text-muted);
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 12px; border-bottom: 1px solid var(--sb-border);
}
.sb-table td { padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--sb-border) 50%, transparent); }
.sb-table tr:hover td { background: rgba(148,163,184,.06); }

.sb-note {
  font-size: 13px; color: var(--sb-text-muted);
  border-left: 3px solid var(--sb-accent2);
  padding: 8px 12px; margin: var(--sp-lg) 0;
  background: color-mix(in srgb, var(--sb-accent2) 8%, transparent);
  border-radius: 0 var(--r-btn) var(--r-btn) 0;
}

/* ── Misc ──────────────────────────────────────────────────── */
.sb-skipnav {
  position: absolute; left: -9999px; top: 0;
  background: var(--sb-accent); color: #0f172a;
  padding: 8px 14px; border-radius: 0 0 var(--r-btn) 0; font-weight: 600;
}
.sb-skipnav:focus { left: 0; z-index: 100; text-decoration: none; }

/* bar chart (canvas fallback styling for the bars wrapper) */
.sb-bar-row { display: grid; grid-template-columns: 140px 1fr 90px; gap: 12px; align-items: center; padding: 6px 0; }
.sb-bar-track { background: rgba(148,163,184,.15); border-radius: 4px; height: 22px; overflow: hidden; }
.sb-bar-fill { height: 100%; border-radius: 4px; background: var(--sb-accent); transition: width .3s ease; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Alpine: hide data before Alpine booted (prevents FOUC on tool shells) */
[x-cloak] { display: none !important; }