/* Workflow Wizards: design tokens en thema-schakelaar.
   Donker is de basis. Licht staat onder [data-theme="light"]. De inline script in <head>
   zet data-theme vóór de eerste paint (systeemvoorkeur, of de opgeslagen keuze).
   Zonder JavaScript volgt de pagina prefers-color-scheme via het blok onderaan. */

:root {
  color-scheme: dark;
  --radius: 8px;

  /* Oppervlakken: pagina < sectie < kaart < element (in donker steeds iets lichter) */
  --bg: #0D0D0D;                 /* niveau 1: pagina */
  --surface-section: #0f1115;    /* niveau 2: sectie */
  --panel: #161b22;              /* niveau 3: kaart */
  --surface-element: #1a1f26;    /* niveau 4: element op een kaart */

  /* Tekst */
  --text: #FFFFFF;
  --text-secondary: #A0A0A0;
  --muted: var(--text-secondary);
  --accent: #f37a35;
  --on-accent: #0D0D0D;

  /* Lijnen */
  --border: #53626e40;
  --border-subtle: #53626e20;
  --border-strong: #53626e;

  /* Elevatie */
  --shadow-card: 0 4px 24px rgba(0,0,0,0.4), 0 1px 0 rgba(83,98,110,0.2) inset;
  --shadow-card-hover: 0 8px 32px rgba(243,122,53,0.15), 0 1px 0 rgba(83,98,110,0.3) inset;
  --shadow-accent: 0 8px 32px rgba(243,122,53,0.15);
  --shadow-popover: 0 8px 32px rgba(0,0,0,0.5);

  /* Pack of Nodes-logo heeft donkere tekst: in donker een lichte plaat erachter, in licht niets.
     De accent-gloed is er alleen in donker. */
  --logo-halo-strong: #F3F0EA;
  --logo-halo-soft: #F3F0EA;
  --accent-glow: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 7%, transparent) 0%, transparent 70%);

  /* Overig */
  --icon-filter: brightness(0) invert(1);
  --noise-opacity: 0.035;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F0EA;
  --surface-section: #FBFAF8;
  --panel: #FFFFFF;
  --surface-element: #EAE6DE;

  --text: #14171C;
  --text-secondary: #5A6169;
  --accent: #AD460A;             /* 4.6:1 of beter op elk lichte oppervlak, als tekst */
  --on-accent: #FFFFFF;

  --border: #14171C26;
  --border-subtle: #14171C14;
  --border-strong: #B8B3A8;

  --shadow-card: 0 1px 2px rgba(20,23,28,0.06), 0 6px 20px rgba(20,23,28,0.06);
  --shadow-card-hover: 0 2px 4px rgba(20,23,28,0.08), 0 10px 28px rgba(173,70,10,0.14);
  --shadow-accent: 0 8px 28px rgba(173,70,10,0.16);
  --shadow-popover: 0 2px 6px rgba(20,23,28,0.10), 0 16px 40px rgba(20,23,28,0.16);

  --icon-filter: brightness(0);
  --noise-opacity: 0.02;
  --logo-halo-strong: none;
  --logo-halo-soft: none;
  --accent-glow: none;
}

/* Geen JavaScript: volg het systeem */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg: #F3F0EA;
    --surface-section: #FBFAF8;
    --panel: #FFFFFF;
    --surface-element: #EAE6DE;
    --text: #14171C;
    --text-secondary: #5A6169;
    --accent: #AD460A;
    --on-accent: #FFFFFF;
    --border: #14171C26;
    --border-subtle: #14171C14;
    --border-strong: #B8B3A8;
    --shadow-card: 0 1px 2px rgba(20,23,28,0.06), 0 6px 20px rgba(20,23,28,0.06);
    --shadow-card-hover: 0 2px 4px rgba(20,23,28,0.08), 0 10px 28px rgba(173,70,10,0.14);
    --shadow-accent: 0 8px 28px rgba(173,70,10,0.16);
    --shadow-popover: 0 2px 6px rgba(20,23,28,0.10), 0 16px 40px rgba(20,23,28,0.16);
    --icon-filter: brightness(0);
    --noise-opacity: 0.02;
    --logo-halo-strong: none;
    --logo-halo-soft: none;
    --accent-glow: none;
  }
}

/* Schakelaar */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; flex: none; }
.theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: inline; }
.mobile-menu .theme-toggle {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  justify-content: flex-start;
  color: var(--text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle { transition: none; }
}