/* ── 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 */
  --accent: #2563eb;
  --accent-rgb: 37, 99, 235;
  --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: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* Elevation */
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.02), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:
    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg:
    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* 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: #0d1219;
  --bg3: #131b28;
  --surface: #0e141d;
  --surface2: #111827;

  --border: #192130;
  --border2: #2a3952;

  --text: #e8ecf2;
  --text2: #94a3b8;
  --text3: #64748b;

  --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.1);
  --success-bd: rgba(22, 163, 74, 0.28);
  --warn-bg: rgba(217, 119, 6, 0.1);
  --warn-bd: rgba(217, 119, 6, 0.28);
  --danger-bg: rgba(220, 38, 38, 0.1);
  --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);
}