/* RepairBill v2 — Design Tokens */
/* Fonts: Cabinet Grotesk (display) + Satoshi (body) via Fontshare */

:root {
  /* ─── Surfaces ─── */
  --bg:         #09090b;
  --surface:    #131316;
  --surface2:   #1a1a1f;
  --surface3:   #222228;
  --elevated:   #27272d;

  /* ─── Borders ─── */
  --border:     #27272a;
  --border-dim: #1e1e22;
  --border-lit: #3f3f46;

  /* ─── Brand ─── */
  --accent:     #d4f522;
  --accent-dim: rgba(212, 245, 34, 0.08);
  --accent-mid: rgba(212, 245, 34, 0.15);
  --accent-fg:  #0a0a0a;
  --blue:       #60a5fa;
  --blue-dim:   rgba(96, 165, 250, 0.1);

  /* ─── Text ─── */
  --text:       #fafaf9;
  --text-2:     #a1a1aa;
  --text-3:     #63636e;

  /* ─── Semantic ─── */
  --success:    #4ade80;
  --success-bg: rgba(74, 222, 128, 0.08);
  --danger:     #f87171;
  --danger-bg:  rgba(248, 113, 113, 0.08);
  --warn:       #fbbf24;
  --warn-bg:    rgba(251, 191, 36, 0.08);
  --info:       #60a5fa;
  --info-bg:    rgba(96, 165, 250, 0.08);

  /* ─── Layout ─── */
  --sidebar-w:  260px;
  --header-h:   56px;
  --mobile-nav: 64px;
  --r:          10px;
  --r-sm:       6px;
  --r-lg:       14px;
  --r-xl:       20px;

  /* ─── Shadows ─── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.3);
  --shadow-md:  0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.5);
  --shadow-glow: 0 0 20px rgba(212,245,34,.12);

  /* ─── Transitions ─── */
  --ease:       cubic-bezier(.22, .61, .36, 1);
  --dur:        0.18s;
}

/* ─── Light Mode ─── */
.light {
  --bg:         #f8f8f6;
  --surface:    #ffffff;
  --surface2:   #f0f0ec;
  --surface3:   #e5e5e0;
  --elevated:   #ffffff;
  --border:     #e4e4de;
  --border-dim: #ebebea;
  --border-lit: #d4d4cf;
  --accent:     #65a30d;
  --accent-dim: rgba(101, 163, 13, 0.06);
  --accent-mid: rgba(101, 163, 13, 0.12);
  --accent-fg:  #ffffff;
  --text:       #0c0c0b;
  --text-2:     #57574f;
  --text-3:     #a3a39b;
  --success:    #16a34a;
  --success-bg: rgba(22, 163, 74, 0.06);
  --danger:     #dc2626;
  --danger-bg:  rgba(220, 38, 38, 0.06);
  --warn:       #d97706;
  --warn-bg:    rgba(217, 119, 6, 0.06);
  --info:       #2563eb;
  --info-bg:    rgba(37, 99, 235, 0.06);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.1);
  --shadow-glow: 0 0 20px rgba(101,163,13,.1);
}