/* ── DESIGN TOKENS ────────────────────────────────────────────────────────── */
/* Light theme (default) and dark theme via [data-theme="dark"]              */

:root {
  /* ── Brand palette ──────────────────────────────────────── */
  --navy:        #1B3A5C;
  --navy-dark:   #0D1B2E;
  --blue:        #2563EB;
  --blue-light:  #EFF6FF;
  --blue-mid:    #BFDBFE;
  --green:       #16A34A;
  --green-light: #DCFCE7;
  --amber:       #D97706;
  --amber-light: #FEF3C7;
  --red:         #DC2626;
  --red-light:   #FEE2E2;
  --grey:        #475569;
  --grey-light:  #F1F5F9;
  --grey-border: #E2E8F0;
  --text:        #0F172A;
  --white:       #FFFFFF;
  --purple:      #7C3AED;

  /* ── Surfaces ───────────────────────────────────────────── */
  --bg-app:       #F1F5F9;
  --bg-card:      #FFFFFF;
  --bg-card-alt:  #FAFBFC;
  --bg-input:     #FFFFFF;
  --bg-code:      #F8FAFC;

  /* ── Text hierarchy ─────────────────────────────────────── */
  --text-primary:   #0F172A;
  --text-secondary: #475569;
  --text-muted:     #94A3B8;

  /* ── Feedback ───────────────────────────────────────────── */
  --success-bg:     #F0FDF4;
  --success-border: #BBF7D0;
  --success-text:   #166534;
  --error-bg:       #FEF2F2;
  --error-border:   #FECACA;
  --error-text:     #991B1B;
  --warning-bg:     #FFFBEB;
  --warning-border: #FDE68A;
  --warning-text:   #92400E;

  /* ── Elevation ──────────────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow:     0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 16px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.1), 0 16px 48px rgba(0, 0, 0, 0.08);

  /* ── Layout ─────────────────────────────────────────────── */
  --radius:      12px;
  --radius-sm:   8px;
  --radius-lg:   16px;
  --sidebar-w:   268px;
  --topbar-h:    56px;

  /* ── Typography ─────────────────────────────────────────── */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif;
}

/* ── DARK THEME ──────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --bg-app:       #080C14;
  --bg-card:      #0F1520;
  --bg-card-alt:  #161D2B;
  --bg-input:     #161D2B;
  --bg-code:      #111827;

  --border:       #1C2536;
  --grey-border:  #1C2536;
  --grey-light:   #161D2B;

  --text:           #E2E8F0;
  --text-primary:   #E2E8F0;
  --text-secondary: #94A3B8;
  --text-muted:     #64748B;

  --navy:        #93C5FD;
  --navy-dark:   #1E293B;
  --grey:        #94A3B8;
  --white:       #0F1520;

  --blue-light:  rgba(59, 130, 246, 0.12);
  --green-light: rgba(34, 197, 94, 0.12);
  --amber-light: rgba(217, 119, 6, 0.12);
  --red-light:   rgba(220, 38, 38, 0.12);

  --success-bg:     rgba(34, 197, 94, 0.1);
  --success-border: rgba(34, 197, 94, 0.25);
  --success-text:   #86EFAC;
  --error-bg:       rgba(239, 68, 68, 0.1);
  --error-border:   rgba(239, 68, 68, 0.25);
  --error-text:     #FCA5A5;
  --warning-bg:     rgba(245, 158, 11, 0.1);
  --warning-border: rgba(245, 158, 11, 0.25);
  --warning-text:   #FDE68A;

  /* ── Glow accents ────────────────────────────────────────── */
  --glow-blue:   0 0 20px rgba(59, 130, 246, 0.15), 0 0 60px rgba(59, 130, 246, 0.05);
  --glow-green:  0 0 20px rgba(52, 211, 153, 0.15), 0 0 60px rgba(52, 211, 153, 0.05);

  /* ── Refined shadows with light rim ──────────────────────── */
  --shadow:     0 2px 8px rgba(0, 0, 0, 0.25), 0 0 1px rgba(255, 255, 255, 0.03);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.3), 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.35), 0 0 1px rgba(255, 255, 255, 0.05);
}