/* ============================================================
   CORE — tokens, reset, typography, brutal primitives
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
:root{
  --bg:        #FBF9F4;
  --surface:   #FFFFFF;
  --ink:       #14101F;
  --muted:     #6E687F;
  --line:      #E7E2D8;
  --border-w:  2px;

  --purple:      #7A2CF5;
  --purple-soft: #F1E9FF;
  --lime:        #D7FF3F;
  --lime-deep:   #B9E017;
  --pink:        #FF4FA3;
  --pink-soft:   #FFE7F2;
  --yellow:      #FFE45C;
  --yellow-soft: #FFF6D9;

  --font-display:'Baloo 2', ui-rounded, sans-serif;
  --font-body:   'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono:   'Space Mono', monospace;

  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --ease: cubic-bezier(.22,1,.36,1);
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

html,body{ margin:0; padding:0; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; cursor:pointer; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
input,select,textarea{ font-family:inherit; }

.font-d{ font-family:var(--font-display); }
.font-m{ font-family:var(--font-mono); }
.hidden{ display:none !important; }

/* ---------- brutal primitives ---------- */
.brutal{
  background:var(--surface);
  border:var(--border-w) solid var(--ink);
  border-radius:var(--r-md);
  box-shadow:var(--shadow);
}

.brutal-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:14.5px;
  padding:12px 22px; border-radius:999px;
  border:var(--border-w) solid var(--ink);
  background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .2s;
}
.brutal-btn:hover{ transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--ink); }
.brutal-btn:active{ transform:translate(0,0); box-shadow:1px 1px 0 var(--ink); }
.brutal-btn.primary{ background:var(--ink); color:#fff; }
.brutal-btn.lime{ background:var(--lime); }
.brutal-btn.purple{ background:var(--purple); color:#fff; }
.brutal-btn.ghost{ background:transparent; box-shadow:none; border-color:var(--line); }
.brutal-btn.ghost:hover{ box-shadow:none; background:var(--purple-soft); border-color:var(--ink); }
.brutal-btn.sm{ padding:8px 16px; font-size:13px; }
.brutal-btn.icon-only{ padding:10px; border-radius:12px; }
.brutal-btn:disabled{ opacity:.4; cursor:not-allowed; transform:none; box-shadow:var(--shadow-sm); }

.brutal-input, .brutal-select, .brutal-textarea{
  width:100%;
  font-family:var(--font-body); font-weight:600; font-size:14.5px; color:var(--ink);
  background:var(--surface);
  border:var(--border-w) solid var(--ink);
  border-radius:var(--r-sm);
  padding:12px 14px;
  transition:box-shadow .2s var(--ease);
}
.brutal-input:focus, .brutal-select:focus, .brutal-textarea:focus{ outline:none; box-shadow:3px 3px 0 var(--purple); }
.brutal-input::placeholder{ color:var(--muted); font-weight:500; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-family:var(--font-display); font-size:12.5px; font-weight:600; letter-spacing:.02em; }
.field .hint{ font-size:11.5px; color:var(--muted); }

.chip{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:600; font-size:12.5px;
  padding:8px 14px; border-radius:999px;
  border:var(--border-w) solid var(--ink);
  background:var(--surface);
  transition:all .18s var(--ease);
  cursor:pointer;
}
.chip.active{ background:var(--ink); color:#fff; }
.chip input{ display:none; }

.badge{ font-family:var(--font-mono); font-size:10.5px; padding:3px 9px; border-radius:99px; border:1.5px solid var(--ink); }
.badge.on{ background:var(--lime); }
.badge.pending{ background:var(--yellow-soft); }
.badge.closed{ background:var(--line); color:var(--muted); border-color:var(--line); }

.avatar{ border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:700; flex:none; border:var(--border-w) solid var(--ink); }

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }