/* =========================
   base.css
   - reset
   - font
   - variabili CSS (light/dark)
   - background globale + decor
   ========================= */

:root {
  --bg: #ffffff;
  --bg-soft: #f6f8fb;

  --text: #0f172a;         /* slate-900 */
  --muted: #64748b;        /* slate-500 */

  --border: rgba(15, 23, 42, 0.10);

  --primary: #1d4ed8;      /* blue-700 */
  --primary-600: #2563eb;  /* blue-600 */
  --accent: #0ea5e9;       /* sky-500 */

  --shadow: 0 10px 30px rgba(2, 6, 23, 0.08);
  --shadow-soft: 0 10px 25px rgba(2, 6, 23, 0.06);
  --radius: 16px;
  --container: 1120px;

  /* Theme surfaces */
  --card-bg: rgba(255, 255, 255, 0.82);
  --btn-bg: rgba(255, 255, 255, 0.92);
  --btn-text: var(--text);

  --footer-bg: rgba(255, 255, 255, 0.65);

  --header-bg: rgba(255, 255, 255, 0.72);
  --header-bg-scrolled: rgba(255, 255, 255, 0.92);
  --header-border: rgba(15, 23, 42, 0.08);
  --header-border-scrolled: rgba(15, 23, 42, 0.12);

  --menu-bg: rgba(255, 255, 255, 0.96);
  --overlay-bg: rgba(15, 23, 42, 0.30);

  --hover-bg: rgba(255, 255, 255, 0.70);
  --icon-muted: rgba(15, 23, 42, 0.70);

  /* Page background */
  --page-bg: #ffffff;
  --page-bg-bottom: #f8fbff;
  --page-grad-1: rgba(37, 99, 235, 0.10);
  --page-grad-2: rgba(14, 165, 233, 0.08);

  --select-surface-top: rgba(255, 255, 255, 0.98);
  --select-surface-bottom: rgba(241, 245, 249, 0.96);
  --select-border: rgba(37, 99, 235, 0.16);
  --select-border-strong: rgba(37, 99, 235, 0.34);
  --select-ring: rgba(37, 99, 235, 0.18);
  --select-shadow:
    0 14px 32px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  --select-shadow-hover:
    0 18px 38px rgba(37, 99, 235, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);

  /* Decor */
  --decor-1: rgba(29, 78, 216, 0.10);
  --decor-2: rgba(14, 165, 233, 0.10);
  --decor-3: rgba(29, 78, 216, 0.08);
}

/* Dark theme overrides */
body.theme-dark {
  --text: #e5e7eb;
  --muted: #94a3b8;

  --border: rgba(148, 163, 184, 0.18);

  --shadow: 0 12px 36px rgba(0, 0, 0, 0.36);
  --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.28);

  --card-bg: rgba(15, 23, 42, 0.72);
  --btn-bg: rgba(15, 23, 42, 0.72);
  --btn-text: var(--text);

  --footer-bg: rgba(15, 23, 42, 0.70);

  --header-bg: rgba(15, 23, 42, 0.72);
  --header-bg-scrolled: rgba(15, 23, 42, 0.90);
  --header-border: rgba(148, 163, 184, 0.10);
  --header-border-scrolled: rgba(148, 163, 184, 0.16);

  --menu-bg: rgba(15, 23, 42, 0.92);
  --overlay-bg: rgba(0, 0, 0, 0.55);

  --hover-bg: rgba(255, 255, 255, 0.04);
  --icon-muted: rgba(226, 232, 240, 0.82);

  --page-bg: #0b1220;
  --page-bg-bottom: #070d18;
  --page-grad-1: rgba(37, 99, 235, 0.18);
  --page-grad-2: rgba(14, 165, 233, 0.12);

  --select-surface-top: rgba(17, 24, 39, 0.96);
  --select-surface-bottom: rgba(15, 23, 42, 0.96);
  --select-border: rgba(96, 165, 250, 0.26);
  --select-border-strong: rgba(125, 211, 252, 0.48);
  --select-ring: rgba(59, 130, 246, 0.24);
  --select-shadow:
    0 16px 34px rgba(2, 6, 23, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --select-shadow-hover:
    0 20px 40px rgba(14, 165, 233, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --decor-1: rgba(37, 99, 235, 0.16);
  --decor-2: rgba(14, 165, 233, 0.14);
  --decor-3: rgba(37, 99, 235, 0.10);
}

/* Reset minimal */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  line-height: 1.5;

  background-color: var(--page-bg);
  background:
    radial-gradient(1200px 600px at 15% -10%, var(--page-grad-1), transparent 55%),
    radial-gradient(1000px 600px at 85% 0%, var(--page-grad-2), transparent 60%),
    linear-gradient(180deg, var(--page-bg) 0%, var(--page-bg) 40%, var(--page-bg-bottom) 100%);

  transition: color 220ms ease, background-color 220ms ease;
}

/* Soft geometric shapes overlay (page-wide) */
.bg-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
  background:
    radial-gradient(220px 140px at 12% 20%, var(--decor-1), transparent 60%),
    radial-gradient(260px 180px at 78% 18%, var(--decor-2), transparent 60%),
    radial-gradient(260px 180px at 60% 78%, var(--decor-3), transparent 60%);
}