/* ═══════════════════════════════════════════════════════════
   2 DEGREE WEBAPP — variables.css
   Design tokens only. No layout, no components.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Brand greens */
  --ck-green:       #075E54;
  --ck-green-mid:   #128C7E;
  --ck-green-light: #25D366;
  --ck-green-pale:  #E8F5E9;

  /* Semantic colours */
  --ck-amber-bg:    #FEF3C7;  --ck-amber-text:  #92400E;
  --ck-blue-bg:     #EFF6FF;  --ck-blue-text:   #1E40AF;
  --ck-red-bg:      #FEF2F2;  --ck-red-text:    #991B1B;
  --ck-purple-bg:   #F5F3FF;  --ck-purple-text: #4C1D95;

  /* Surface */
  --bg:             #F0F2F5;
  --surface:        #FFFFFF;
  --border:         #E5E7EB;
  --border-strong:  #D1D5DB;

  /* Text */
  --text:           #111827;
  --text-2:         #6B7280;
  --text-3:         #9CA3AF;

  /* Radius */
  --r:    12px;
  --r-sm:  8px;

  /* Layout */
  --sidebar-w:   240px;
  --page-pad:     14px;
  --topbar-h:     56px;
  --tabbar-h:     48px;
}

/* ── Resets ─────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html, body { height: 100%; width: 100%; overflow-x: hidden; }
body { font-family: 'DM Sans', sans-serif; background: var(--bg); color: var(--text); }

/* ── Keyframes ──────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }