/* ============================================================
   CODABAN — Design System tokens
   Refined developer tool, warmed by the boar's orange + cream.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* --- Brand --------------------------------------------------- */
  --boar:        #E0642C;   /* Codaban orange (sampled from mascot) */
  --boar-deep:   #C24F1E;   /* pressed / hover */
  --boar-soft:   #FBEADF;   /* orange tint surface */
  --boar-soft2:  #F6D9C6;
  --tusk:        #FBF8F3;   /* cream / tusk white */
  --mane:        #8A4B2A;   /* brown */

  /* --- Ink & neutrals (warm grey) ------------------------------ */
  --ink:         #211E1A;   /* near-black, warm */
  --ink-2:       #4B4640;   /* secondary text */
  --ink-3:       #837C72;   /* muted text */
  --ink-4:       #A9A296;   /* faint */
  --line:        #ECE7DF;   /* hairline */
  --line-2:      #E2DCD1;
  --surface:     #FFFFFF;   /* cards */
  --surface-2:   #FBFAF7;   /* raised alt */
  --bg:          #F6F4EF;   /* app background, warm */
  --bg-tint:     #F1EEE7;

  /* --- Mode semantics ----------------------------------------- */
  --smoke:       #2BA39C;   /* Smoke review — teal, quick pass */
  --smoke-soft:  #DDF1EF;
  --deep:        #5A4BD6;   /* Deep review — indigo, thorough */
  --deep-soft:   #E7E3FB;
  --agent:       #B5471E;   /* Agent / fixes — burnt */
  --agent-soft:  #F7E0D6;

  /* --- Status ------------------------------------------------- */
  --approve:     #1E9E6A;
  --approve-soft:#DCF2E8;
  --changes:     #D98A1F;
  --changes-soft:#FAEBCF;
  --comment:     #3A78D0;
  --comment-soft:#DCEAFB;
  --error:       #D9483B;
  --error-soft:  #FBE2DE;
  --tier-senior: #5A4BD6;
  --tier-junior: #B06FCB;

  /* --- Type --------------------------------------------------- */
  --font-display: 'Space Grotesk', sans-serif;
  --font-ui:      'Hanken Grotesk', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* --- Radius / shadow ---------------------------------------- */
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --shadow-1: 0 1px 2px rgba(33,30,26,.05), 0 1px 1px rgba(33,30,26,.04);
  --shadow-2: 0 2px 4px rgba(33,30,26,.05), 0 6px 16px rgba(33,30,26,.06);
  --shadow-3: 0 12px 34px rgba(33,30,26,.12), 0 4px 10px rgba(33,30,26,.06);
  --ring: 0 0 0 3px rgba(224,100,44,.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--boar-soft2); color: var(--ink); }

/* scrollbars */
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-thumb { background: #DAD3C7; border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: #C6BEAF; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* numeric tabular alignment helper */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.mono { font-family: var(--font-mono); }

/* generic focus */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: var(--r-sm);
}

/* keyframes */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { 0% { opacity:0; transform: scale(.96) translateY(-4px);} 100%{opacity:1; transform:none;} }
@keyframes growW { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}