/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {

  /* =========================
     SPACING
  ========================= */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* =========================
     RADIUS
  ========================= */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  /* =========================
     TYPOGRAPHY
  ========================= */
  --font-xs: 0.72rem;
  --font-sm: 0.82rem;
  --font-md: 0.95rem;
  --font-lg: 1.15rem;
  --font-xl: 1.5rem;

  /* =========================
     SHADOWS
  ========================= */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,0.12);

  /* =========================
     TRANSITIONS
  ========================= */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;

  /* =========================
     ACCENT (overridden by theme + JS)
  ========================= */
  --accent-color: #1d8cf8;
  --accent-dark: #1565c0;
  --accent-r: 29;
  --accent-g: 140;
  --accent-b: 248;
  --accent-soft: rgba(29, 140, 248, 0.12);
  --accent-hover: rgba(29, 140, 248, 0.2);
  --accent-border: rgba(29, 140, 248, 0.35);

}