/* ============================================================
   CheckOps Design Tokens
   Unified design system for both Admin (dark) and App (light)
   ============================================================ */

/* ===== ROOT (shared) ===== */
:root {
  --r: 10px;
  --r2: 14px;
  --r3: 20px;
  --transition: 0.15s ease;
  --font: 'DM Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Syne', 'Plus Jakarta Sans', sans-serif;
}

/* ===== DARK THEME (Admin) ===== */
[data-theme="dark"] {
  --bg: #0B0C10;
  --surface: #13141A;
  --surface2: #1A1B23;
  --surface3: #20212B;
  --border: rgba(255,255,255,.07);
  --border2: rgba(255,255,255,.13);
  --text: #EEEAE0;
  --muted: #7A7870;
  --muted2: #4A4840;
  --green: #3FE8A0;
  --green-bg: rgba(63,232,160,.12);
  --green-bg2: rgba(63,232,160,.06);
  --blue: #5B8EFF;
  --blue-bg: rgba(91,142,255,.12);
  --orange: #FF7043;
  --orange-bg: rgba(255,112,67,.12);
  --amber: #F5A623;
  --amber-bg: rgba(245,166,35,.12);
  --red: #FF4D6D;
  --red-bg: rgba(255,77,109,.12);
  --purple: #A78BFA;
  --purple-bg: rgba(167,139,250,.12);
  --shadow: 0 2px 12px rgba(0,0,0,.3);
  --shadow2: 0 8px 32px rgba(0,0,0,.4);
  --white: #EEEAE0;
}

/* ===== LIGHT THEME (App) ===== */
[data-theme="light"] {
  --bg: #F4F3EF;
  --surface: #FFFFFF;
  --surface2: #FAFAF7;
  --surface3: #F0EFEB;
  --border: #E5E3DD;
  --border2: #CDCBC4;
  --text: #1C1B17;
  --muted: #9B9890;
  --muted2: #C5C3BC;
  --green: #00C97A;
  --green-bg: #E6FAF2;
  --green-bg2: #F0FDF7;
  --green-dark: #007A4A;
  --blue: #3B72F6;
  --blue-bg: #EEF2FF;
  --blue-dark: #2348C0;
  --orange: #FF6B2B;
  --orange-bg: #FFF0E9;
  --orange-dark: #C44000;
  --amber: #F59E0B;
  --amber-bg: #FFFBEB;
  --amber-dark: #92600A;
  --red: #FF3B5C;
  --red-bg: #FFEBEE;
  --red-dark: #C0002E;
  --purple: #7C3AED;
  --purple-bg: #F3EEFF;
  --purple-dark: #5B21B6;
  --shadow: 0 2px 12px rgba(0,0,0,.07);
  --shadow2: 0 8px 32px rgba(0,0,0,.12);
  --white: #FFFFFF;
}

/* ===== RESET ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-tap-highlight-color: transparent; }

/* ===== TYPOGRAPHY ===== */
h1, h2, h3, .syne { font-family: var(--font-display); }
.text-muted { color: var(--muted); }
.text-green { color: var(--green); }
.text-blue { color: var(--blue); }
.text-orange { color: var(--orange); }
.text-amber { color: var(--amber); }
.text-red { color: var(--red); }
.text-purple { color: var(--purple); }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--surface3); border-radius: 10px; }