/* ═══════════════════════════════════════════════════════════════════
   VIBE AGENTS - SHARED DESIGN TOKENS
   Extracted verbatim from Content Forge (contentforge.vibeagentsacademy.com)
   and the Vibe Agents Academy landing page. Single source of truth for the
   tools-hub design language. Every new tool imports this so the whole hub
   reads as one product.

   Aesthetic: Linear / Vercel - monochrome base, signal-green accent earned
   only on CTAs, active states, badges, focus rings. No em-dashes in copy.
   Fonts: Inter Tight (display) / Inter (body) / JetBrains Mono (mono).
   Theme: dark by default, [data-theme="light"] flips to the light palette.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --bg:           #08080a;
  --surface:      #0e0e11;
  --card:         #131316;
  --card-hover:   #1a1a1e;
  --border:       rgba(255,255,255,0.14);
  --border-hi:    rgba(255,255,255,0.28);

  --primary:      #ffffff;
  --primary-soft: rgba(255,255,255,0.06);
  --primary-glow: rgba(255,255,255,0.10);
  --secondary:    #d4d4d8;
  --sec-soft:     rgba(255,255,255,0.05);
  --warm:         #e4e4e7;
  --danger:       #ef5350;

  /* Brand accent: CORAL-RED (matches the EMR agency deck). Used on CTAs,
     active states, badges, focus rings, part-labels. Base stays monochrome.
     NOTE: the verdict palette below keeps its own traffic-light greens/reds
     for functional signal; brand accent is chrome only. */
  --accent:       #f04438;
  --accent-hover: #d63a2f;
  --accent-ink:   #ffffff;
  --accent-soft:  rgba(240,68,56,0.12);
  --accent-border:rgba(240,68,56,0.50);

  --t1: #ffffff;
  --t2: rgba(255,255,255,0.86);
  --t3: rgba(255,255,255,0.66);
  --t4: rgba(255,255,255,0.40);

  --logo-ink: #08080a;

  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  --r:   10px;
  --rsm: 7px;
  --tr:  0.16s cubic-bezier(.4,0,.2,1);

  --sidebar-w: 256px;
  --header-h:  60px;

  /* ── Ad Radar verdict palette (the only tool-specific addition) ──
     These map the 5 verdicts to the shared language: green accent for
     SCALE (on-brand), red danger for KILL, and neutral-derived ambers
     for the middle states so they sit inside the monochrome base. */
  --v-scale:   #22c55e;           /* SCALE  - signal green (good, kept) */
  --v-healthy: #3b82f6;           /* HEALTHY - calm blue */
  --v-watch:   #f59e0b;           /* WATCH  - amber */
  --v-dying:   #f97316;           /* DYING  - orange */
  --v-kill:    var(--danger);     /* KILL   - danger red */
}

/* LIGHT MODE - bright whites, Linear/Vercel light palette */
[data-theme="light"] {
  --bg:           #ffffff;
  --surface:      #fbfbfc;
  --card:         #ffffff;
  --card-hover:   #f4f4f5;
  --border:       rgba(0,0,0,0.12);
  --border-hi:    rgba(0,0,0,0.24);

  --primary:      #08080a;
  --primary-soft: rgba(0,0,0,0.05);
  --primary-glow: rgba(0,0,0,0.08);
  --secondary:    #3f3f46;
  --sec-soft:     rgba(0,0,0,0.04);
  --warm:         #27272a;
  --danger:       #d83a34;

  /* Accent in light mode: same coral, slightly deeper to read on white. */
  --accent:       #e23b30;
  --accent-hover: #c4322a;
  --accent-ink:   #ffffff;
  --accent-soft:  rgba(226,59,48,0.10);
  --accent-border:rgba(226,59,48,0.45);

  --t1: #09090b;
  --t2: rgba(9,9,11,0.82);
  --t3: rgba(9,9,11,0.62);
  --t4: rgba(9,9,11,0.42);

  --logo-ink: #ffffff;

  --v-healthy: #2563eb;
  --v-watch:   #d97706;
  --v-dying:   #ea580c;
}

/* ═══════════════════════════════════════
   RESET & BASE (shared with Content Forge)
═══════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--t1);
  min-height:100vh;
  overflow-x:hidden;
  letter-spacing:-0.011em;
  font-weight:400;
}
button{cursor:pointer;font-family:inherit;border:none;outline:none}
textarea,input{font-family:inherit;outline:none;border:none}
a{color:inherit;text-decoration:none}
::selection{background:#2563eb;color:#fff}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.10);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.18)}
[data-theme="light"] ::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.12)}

/* Display headings use Inter Tight, tightened tracking */
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.02em;font-weight:600}
.mono,code,kbd{font-family:var(--font-mono)}