/* EdHelfy — CSS custom properties and theme variables */
  :root {
    --bg: #f6f5f1;
    --bg2: #efeee9;
    --surface: #ffffff;
    --surface-hover: #fafaf8;
    --sidebar-bg: #ffffff;
    --sidebar-hover: #F3E8FF;
    --sidebar-active: #EDE9FE;
    --text: #1c1917;
    --text2: #78716c;
    --text3: #a8a29e;
    --border: #e7e5e0;
    --border2: #d6d3cd;
    --accent: #1e56a0;
    --accent-light: #e0ecfa;
    --accent-hover: #164580;
    --accent-subtle: #f0f5ff;
    --accent2: #d97706;
    --accent2-light: #fef3c7;
    --gradient-primary: linear-gradient(135deg, #1e56a0, #2d7dd2);
    --green: #059669;
    --green-bg: #dcfce7;
    --green-text: #14532d;
    --yellow: #a16207;
    --yellow-bg: #fef9c3;
    --yellow-text: #713f12;
    --red: #dc2626;
    --red-bg: #fee2e2;
    --red-text: #7f1d1d;
    --blue: #1d4ed8;
    --blue-bg: #dbeafe;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-xs: 6px;
    --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.05);
    --shadow-lg: 0 10px 25px -3px rgba(0,0,0,0.1), 0 20px 50px -4px rgba(0,0,0,0.08);
    --shadow-hover: 0 8px 25px -5px rgba(0,0,0,0.1), 0 4px 10px -3px rgba(0,0,0,0.05);
    --font-display: 'DM Sans', sans-serif;
    --font-body: 'Source Sans 3', sans-serif;
    --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }

  [data-theme="dark"] {
    --bg: #0c0a09;
    --bg2: #1c1917;
    --surface: #1c1917;
    --surface-hover: #292524;
    --sidebar-bg: #ffffff;
    --sidebar-hover: #F3E8FF;
    --sidebar-active: #EDE9FE;
    --text: #fafaf9;
    --text2: #a8a29e;
    --text3: #78716c;
    --border: #292524;
    --border2: #3f3f46;
    --accent: #3b82f6;
    --accent-light: #1e3a5f;
    --accent-hover: #60a5fa;
    --accent-subtle: rgba(74,144,217,0.08);
    --accent2: #f59e0b;
    --accent2-light: #422006;
    --gradient-primary: linear-gradient(135deg, #4a90d9, #6aacf0);
    --green-bg: #052e16;
    --green-text: #86efac;
    --yellow-bg: #422006;
    --yellow-text: #fde68a;
    --red-bg: #450a0a;
    --red-text: #fca5a5;
    --blue-bg: #1e3a5f;
    --shadow: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-hover: 0 8px 25px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.45);
  }

  [data-theme="ocean"] {
    --bg: #f0f4fa;
    --bg2: #e2eaf5;
    --surface: #ffffff;
    --surface-hover: #f5f8fc;
    --sidebar-bg: #ffffff;
    --sidebar-hover: #F3E8FF;
    --sidebar-active: #EDE9FE;
    --text: #0f1729;
    --text2: #4a5e80;
    --text3: #8494b0;
    --border: #d0dbed;
    --border2: #b8c9e2;
    --accent: #1e56a0;
    --accent-light: #dbeafe;
    --accent-hover: #1e40af;
    --accent-subtle: #edf2ff;
    --accent2: #d97706;
    --accent2-light: #fef3c7;
    --gradient-primary: linear-gradient(135deg, #1e56a0, #4a8af5);
    --green: #0d7a3e;
    --green-bg: #d4f5e1;
    --green-text: #0a5c2f;
    --yellow: #b8860b;
    --yellow-bg: #fef6d4;
    --yellow-text: #7a5a07;
    --red: #c42b2b;
    --red-bg: #fde2e2;
    --red-text: #811d1d;
    --blue: #1d56d0;
    --blue-bg: #d0def8;
    --shadow: 0 1px 3px rgba(15,37,87,0.08), 0 2px 8px rgba(15,37,87,0.05);
    --shadow-md: 0 4px 12px rgba(15,37,87,0.1);
    --shadow-lg: 0 10px 25px rgba(15,37,87,0.15);
    --shadow-hover: 0 8px 25px rgba(15,37,87,0.12);
  }