/* ── Design Tokens (matches admin panel light theme) ── */
    :root {
      --bg-base: #EAECF0;
      --bg-surface: #FFFFFF;
      --bg-surface-hover: #F0F2F5;
      --border-subtle: rgba(0,0,0,0.08);
      --border-default: rgba(0,0,0,0.10);
      --border-hover: rgba(0,0,0,0.16);
      --accent: #1E293B;
      --accent-light: #334155;
      --text-primary: #0F172A;
      --text-secondary: #475569;
      --text-muted: #64748B;
      --radius-sm: 10px;
      --radius-md: 14px;
      --radius-lg: 18px;
      --radius-xl: 22px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
      --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
      --shadow-lg: 0 8px 30px rgba(0,0,0,0.14);
      --ease: cubic-bezier(0.4, 0, 0.2, 1);
      --ease-bounce: cubic-bezier(0.16, 1, 0.3, 1);
      /* Pastel icon backgrounds */
      --pastel-blue: #DBEAFE;
      --pastel-green: #D1FAE5;
      --pastel-purple: #E9D5FF;
      --pastel-red: #FEE2E2;
      --pastel-amber: #FEF3C7;
      --bg-inset: #F8FAFC;
      --btn-navy-bg: #1E293B;
      --btn-navy-text: #FFFFFF;
    }

    /* ── Dark Theme Overrides ── */
    [data-theme="dark"] {
      --bg-base: #0F172A;
      --bg-surface: #1E293B;
      --bg-surface-hover: #334155;
      --bg-inset: #0F172A;
      --btn-navy-bg: #60A5FA;
      --btn-navy-text: #0F172A;
      --border-subtle: rgba(255,255,255,0.08);
      --border-default: rgba(255,255,255,0.10);
      --border-hover: rgba(255,255,255,0.16);
      --accent: #60A5FA;
      --accent-light: #93C5FD;
      --text-primary: #F1F5F9;
      --text-secondary: #CBD5E1;
      --text-muted: #94A3B8;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
      --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
      --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
      --pastel-blue: #1E3A5F;
      --pastel-green: #14532D;
      --pastel-purple: #3B1F6E;
      --pastel-red: #4C1D1D;
      --pastel-amber: #4A3728;
    }