/* ============================================================
   Design tokens
   LIGHT in :root (default).  DARK in .dark (class-based opt-in).
   ============================================================ */

:root {
  color-scheme: light;

  --bg-page:        #FAFAFA;
  --bg-surface:     #FFFFFF;
  --bg-elevated:    #F4F4F5;
  --bg-hover:       #EFEFF1;
  --bg-active:      #E4E4E7;

  --border-subtle:  #ECECEE;
  --border-default: #E1E1E4;
  --border-strong:  #D0D0D5;

  --text-primary:   #1C1C1F;
  --text-secondary: #62656B;
  --text-tertiary:  #94959B;
  --text-inverse:   #FFFFFF;

  --accent:         #F97316;
  --accent-hover:   #EA580C;
  --accent-fg:      #FFFFFF;
  --accent-soft:    rgba(249, 115, 22, 0.10);
  --accent-ring:    rgba(249, 115, 22, 0.28);

  --positive:       #10B981;
  --positive-soft:  rgba(16, 185, 129, 0.12);
  --warning:        #EAB308;
  --warning-soft:   rgba(234, 179, 8, 0.12);
  --danger:         #EF4444;
  --danger-soft:    rgba(239, 68, 68, 0.10);

  --shadow-card:    0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.02);
  --shadow-pop:     0 24px 60px -12px rgba(0,0,0,0.18), 0 8px 24px -6px rgba(0,0,0,0.10);

  /* Layout */
  --sb-w-expanded:  240px;
  --sb-w-collapsed: 64px;
  --topbar-h:       60px;
}

.dark {
  color-scheme: dark;

  --bg-page:        #08090A;
  --bg-surface:     #0D0E10;
  --bg-elevated:    #131418;
  --bg-hover:       #1A1B1F;
  --bg-active:      #22232A;

  --border-subtle:  #1C1D21;
  --border-default: #26272D;
  --border-strong:  #34353C;

  --text-primary:   #ECECEE;
  --text-secondary: #8A8F98;
  --text-tertiary:  #5C5F66;
  --text-inverse:   #08090A;

  --accent-soft:    rgba(249, 115, 22, 0.12);
  --accent-ring:    rgba(249, 115, 22, 0.32);
  --positive-soft:  rgba(16, 185, 129, 0.14);
  --warning-soft:   rgba(234, 179, 8, 0.14);
  --danger-soft:    rgba(239, 68, 68, 0.14);

  --shadow-card:    0 1px 0 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-pop:     0 1px 0 0 rgba(255,255,255,0.06) inset, 0 24px 60px -12px rgba(0,0,0,0.6), 0 8px 24px -6px rgba(0,0,0,0.4);
}