/* =========================================================
   THEMES.CSS – kun NEON
   Bruk <body class="theme-neon"> eller <html data-theme="neon">
   Shared tokens: --bg, --bg-alt, --panel, --line, --text, --text-inverse, --muted,
                  --brand-1, --brand-2, --brand-on, --radius, --header-bg, --footer-bg,
                  --chip-bg, --chip-border, --code-bg, --code-border,
                  --shadow-sm, --shadow, --shadow-lg, --edge-cyan, --edge-amber
   ========================================================= */

:root {
  /* Typography & Layout Tokens */
  --font: system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;
  --lh: 1.6;
  --container: 1200px;

  /* Spacing Scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 48px;
  --space-5: 64px;
  --space-6: 96px;

  /* Typography Scale */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 2rem;       /* 32px */
  --text-4xl: 2.5rem;     /* 40px */
  --text-5xl: 3rem;       /* 48px */

  /* Legacy/Computed Tokens */
  --footer-bg: color-mix(in oklab, var(--bg) 10%, var(--text) 90%);
  --text-inverse: #eaf2ff;

  --hero-ov-top: color-mix(in oklab, var(--bg) 10%, transparent);
  --hero-ov-bot: color-mix(in oklab, var(--bg) 66%, transparent);
  --hero-filter: none;
  --hero-panel-tint: 16%;
}

/* ---------- NEON (Neon Pop) ---------- */
:root[data-theme='neon'],
body.theme-neon {
  --bg: #0a0d14;
  --bg-alt: #0d1220;
  --panel: #12182a;
  --line: #222a43;
  --text: #e6ecff;
  --muted: #9fb0d1;
  --brand-1: #00f0ff; /* mer intens turkis */
  --brand-2: #a259ff; /* lilla */
  --brand-on: #0a0d14;
  --radius: 16px;

  --header-bg: rgba(9, 12, 20, 0.7);
  --footer-bg: #0a1014;
  --chip-bg: rgba(255, 255, 255, 0.04);
  --chip-border: var(--line);
  --code-bg: #131a2e;
  --code-border: #24304a;

  --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow: 0 14px 36px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.6);

  --edge-cyan: 0, 240, 255; /* turkis neon */
  --edge-amber: 162, 89, 255; /* lilla neon */

  --hero-ov-top: color-mix(in oklab, var(--bg) 10%, transparent);
  --hero-ov-bot: color-mix(in oklab, var(--bg) 66%, transparent);
  --hero-panel-tint: 16%;
  --hero-filter: none;
}
/* ---------- LIGHT (Bright & Clean) ---------- */
:root[data-theme='light'],
body.theme-light {
  --bg: #f9fafc; /* lys hovedbakgrunn */
  --bg-alt: #ffffff; /* enda lysere seksjoner */
  --panel: #ffffff; /* hvite paneler/kort */
  --line: #dcdfe6; /* grå linjer */
  --text: #1a1a1a; /* mørk tekst */
  --muted: #555; /* sekundær tekst */
  --brand-1: #007bff; /* blå accent */
  --brand-2: #8b47cc; /* lilla accent - darkened for WCAG AA contrast */
  --brand-on: #ffffff; /* tekst på knapper */

  --header-bg: rgba(255, 255, 255, 0.8);
  --footer-bg: #f1f3f6;
  --chip-bg: rgba(0, 0, 0, 0.04);
  --chip-border: var(--line);
  --code-bg: #f4f6fa;
  --code-border: #e0e5ec;

  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
  --shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.12);

  --edge-cyan: 0, 123, 255; /* blå kant-effekt */
  --edge-amber: 162, 89, 255; /* lilla kant-effekt */

  --hero-ov-top: color-mix(in oklab, var(--text) 8%, transparent); /* litt skygge fra toppen for kontrast */
  --hero-ov-bot: color-mix(in oklab, var(--bg) 72%, transparent); /* myk innfading mot bunn */
  --hero-panel-tint: 28%; /* litt “mer glass” i lys modus */
  --hero-filter: saturate(0.95) contrast(1.02) brightness(1.02);
}