/* TokScore Pro — design tokens (2026-09-18, "go light").
   Light is the default. Put data-theme="dark" on <html> to get the previous dark UI back —
   every page reads its colors from these variables, so rollback is that one attribute.
   One brand color (blue), solid pill buttons, no gradients — same rules as the 2026-09-03
   professional pass, now on a white page like the competitors. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  color-scheme: light;
  /* surfaces */
  --bg: #f5f7fa;          /* page */
  --surface: #ffffff;     /* cards, panels, header */
  --surface-2: #f8fafc;   /* nested panels, inputs */
  --surface-3: #e9eef4;   /* chips, bar tracks, hover fills */
  --border: #e2e8f0;
  --border-2: #cbd5e1;
  --border-3: #94a3b8;
  /* text (all >= 4.5:1 on white) */
  --text: #0f172a;
  --text-2: #1e293b;
  --text-3: #334155;
  --muted: #475569;       /* was #94a3b8 on dark */
  --muted-2: #64748b;     /* was #64748b */
  --faint: #6b7280;       /* was #475569 */
  --placeholder: #94a3b8; /* was #334155 — placeholders only */
  /* the one brand color */
  --brand: #2563eb;
  --brand-hover: #1d4ed8;
  --brand-text: #1d4ed8;
  --brand-tint: #dbeafe;
  --on-brand: #ffffff;
  /* semantic (fill / text / tint) */
  --ok: #16a34a;      --ok-text: #15803d;      --ok-tint: #dcfce7;
  --warn: #f59e0b;    --warn-text: #b45309;    --warn-tint: #fef3c7;
  --orange: #f97316;  --orange-text: #c2410c;
  --danger: #e11d48;  --danger-text: #be123c;  --danger-tint: #ffe4e6;
  --teal: #0d9488;    --teal-text: #0f766e;    --teal-tint: #ccfbf1;
  /* rgb triplets for translucent overlays (was rgba(255,255,255,x) on dark) */
  --ink-rgb: 15, 23, 42;
  --surface-rgb: 255, 255, 255;
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 6px 20px rgba(15,23,42,.06);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0e17;
  --surface: #111827;
  --surface-2: #0f172a;
  --surface-3: #1e293b;
  --border: #1e293b;
  --border-2: #334155;
  --border-3: #475569;
  --text: #f8fafc;
  --text-2: #e2e8f0;
  --text-3: #cbd5e1;
  --muted: #94a3b8;
  --muted-2: #64748b;
  --faint: #475569;
  --placeholder: #334155;
  --brand: #2563eb;
  --brand-hover: #3b82f6;
  --brand-text: #60a5fa;
  --brand-tint: rgba(59,130,246,.15);
  --on-brand: #ffffff;
  --ok: #22c55e;      --ok-text: #22c55e;      --ok-tint: rgba(34,197,94,.15);
  --warn: #f59e0b;    --warn-text: #fbbf24;    --warn-tint: rgba(245,158,11,.15);
  --orange: #f97316;  --orange-text: #f97316;
  --danger: #f43f5e;  --danger-text: #f87171;  --danger-tint: rgba(244,63,94,.15);
  --teal: #14b8a6;    --teal-text: #5eead4;    --teal-tint: rgba(20,184,166,.15);
  --ink-rgb: 255, 255, 255;
  --surface-rgb: 17, 24, 39;
  --shadow: none;
}

html { background: var(--bg); }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Buttons: solid pill, one brand color, no gradients (Kalodata / FastMoss pattern). */
button,
.btn, .btn-primary, .btn-secondary, .nav-cta, .score-btn, .action-btn, .plan-btn,
.analyze-btn, .confirm-btn, .pricing-btn, .submit-btn, .url-input-row button,
[class*="-btn"], [class*="btn-"] {
  border-radius: 999px;
}
/* Small square controls that must not turn into pills */
.nav-mobile-toggle, .fi-remove, .stage-chip, .hi-compliance, .tier-badge, .pend-badge,
details summary, .tab, .tabs button, .segment button, .seg button, .swatch { border-radius: 8px; }
.nav-mobile-toggle { border-radius: 0; }

/* Light-page polish: cards get a soft shadow instead of glow; inputs read as fields. */
input, textarea, select { color-scheme: light; }
[data-theme="dark"] input, [data-theme="dark"] textarea, [data-theme="dark"] select { color-scheme: dark; }
::placeholder { color: var(--placeholder); opacity: 1; }