/* =====================================================
   THEME SYSTEM — "Slate & Cobalt"
   Light: warm off-white + ink text + cobalt accent
   Dark:  deep slate-navy + soft grey text + cobalt accent
   ===================================================== */

:root{
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --font-display:'Fraunces', 'IBM Plex Sans', serif;
  --font-body:'IBM Plex Sans', -apple-system, Segoe UI, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --shadow-sm:0 1px 2px rgba(15,23,42,0.06);
  --shadow-md:0 8px 24px rgba(15,23,42,0.08);
  --shadow-lg:0 20px 48px rgba(15,23,42,0.14);

  --transition-theme: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ---------- LIGHT (default) ---------- */
[data-theme="light"]{
  --bg-app:#f7f6f2;
  --bg-surface:#ffffff;
  --bg-surface-2:#f1f0eb;
  --bg-inset:#ececE6;

  --text-primary:#1c2130;
  --text-secondary:#5b6172;
  --text-faint:#9aa0ad;

  --border:#e4e2da;
  --border-soft:#ece9df;

  --accent:#7c4dff;        /* violet */
  --accent-ink:#ffffff;
  --accent-soft:rgba(124,77,255,0.10);
  --accent-hover:#6a3af0;

  --accent-2:#0f9d8c;      /* teal, secondary accent */
  --accent-2-soft:rgba(15,157,140,0.10);

  --danger:#d0463a;
  --danger-soft:rgba(208,70,58,0.10);

  --success:#1f9d5a;
  --success-soft:rgba(31,157,90,0.10);

  --hero-gradient:linear-gradient(135deg, #5b3ff2 0%, #8b3fe0 55%, #a53bd0 100%);
  --hero-ink:#ffffff;
}

/* ---------- DARK ---------- */
[data-theme="dark"]{
  --bg-app:#0c1018;
  --bg-surface:#131826;
  --bg-surface-2:#1a2032;
  --bg-inset:#0e1220;

  --text-primary:#e8eaf1;
  --text-secondary:#a2a8ba;
  --text-faint:#6b7186;

  --border:#252c40;
  --border-soft:#1c2233;

  --accent:#9273ff;        /* brighter violet for dark bg */
  --accent-ink:#0a0e1a;
  --accent-soft:rgba(146,115,255,0.16);
  --accent-hover:#a68bff;

  --accent-2:#2bc4ae;
  --accent-2-soft:rgba(43,196,174,0.12);

  --danger:#ef6a5d;
  --danger-soft:rgba(239,106,93,0.12);

  --success:#3ecb80;
  --success-soft:rgba(62,203,128,0.12);

  --hero-gradient:linear-gradient(135deg, #4c2fd6 0%, #7b2fc7 55%, #9432bb 100%);
  --hero-ink:#ffffff;
}

/* ---------- Base application ---------- */
html,body{
  background:var(--bg-app);
  color:var(--text-primary);
  transition:var(--transition-theme);
}

*{transition:var(--transition-theme);}

::selection{background:var(--accent-soft); color:var(--accent);}

/* ---------- Theme toggle button ---------- */
.theme-toggle-btn{
  background:var(--bg-surface);
  border:1px solid var(--border);
  width:38px; height:38px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary);
  transition:var(--transition-theme), transform .12s ease, border-color .15s ease;
}
.theme-toggle-btn:hover{border-color:var(--accent); color:var(--accent);}
.theme-toggle-btn:active{transform:scale(0.94);}
.theme-toggle-btn svg{width:18px; height:18px;}

[data-theme="dark"] .theme-toggle-btn .icon-sun{display:block;}
[data-theme="dark"] .theme-toggle-btn .icon-moon{display:none;}
[data-theme="light"] .theme-toggle-btn .icon-sun{display:none;}
[data-theme="light"] .theme-toggle-btn .icon-moon{display:block;}