/* ── WRETAN v2.0 — Design Tokens ──────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:        #f8f9fb;
  --bg2:       #f1f3f7;
  --bg3:       #e8ecf2;
  --surface:   #ffffff;
  --surface2:  #f4f6fa;

  /* Borders */
  --border:    #e2e6ef;
  --border2:   #cdd3e0;

  /* Text */
  --text:      #0f1117;
  --text2:     #4a5168;
  --text3:     #96a0b5;

  /* Accent — dynamically overridden by settings.js (only --accent-rgb is set) */
  --accent:       #2563eb;
  --accent-rgb:   37, 99, 235;
  /* Alpha values per theme — dark overrides these below */
  --alpha-bg: 0.08;
  --alpha-bd: 0.22;
  --accent-bg: rgba(var(--accent-rgb), var(--alpha-bg));
  --accent-bd: rgba(var(--accent-rgb), var(--alpha-bd));

  /* Semantic */
  --success:   #16a34a;
  --success-bg:rgba(22,163,74,0.08);
  --success-bd:rgba(22,163,74,0.25);
  --warn:      #d97706;
  --warn-bg:   rgba(217,119,6,0.08);
  --warn-bd:   rgba(217,119,6,0.25);
  --danger:    #dc2626;
  --danger-bg: rgba(220,38,38,0.08);
  --danger-bd: rgba(220,38,38,0.25);

  /* Typography */
  --mono: 'DM Mono', 'Fira Code', monospace;
  --sans: 'DM Sans', system-ui, sans-serif;

  /* Geometry */
  --radius:    8px;
  --radius-sm: 5px;
  --radius-lg: 12px;

  /* Elevation */
  --shadow:    0 1px 2px rgba(0,0,0,0.04), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);

  /* Layout dimensions */
  --sidebar-w:   232px;
  --topbar-h:     48px;
  --bottomnav-h:  60px;

  /* Transitions */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg:        #080c12;
  --bg2:       #0e131d;
  --bg3:       #141b28;
  --surface:   #0e131d;
  --surface2:  #111827;

  --border:    #1a2235;
  --border2:   #1f2d45;

  --text:      #e6e9f0;
  --text2:     #7d899f;
  --text3:     #3d4d63;

  --alpha-bg: 0.12;
  --alpha-bd: 0.28;

  --accent-bg: rgba(var(--accent-rgb), var(--alpha-bg));
  --accent-bd: rgba(var(--accent-rgb), var(--alpha-bd));

  --success-bg:rgba(22,163,74,0.10);
  --success-bd:rgba(22,163,74,0.28);
  --warn-bg:   rgba(217,119,6,0.10);
  --warn-bd:   rgba(217,119,6,0.28);
  --danger-bg: rgba(220,38,38,0.10);
  --danger-bd: rgba(220,38,38,0.28);

  --shadow:    0 1px 3px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.7), 0 4px 16px rgba(0,0,0,0.4);
}