/* Richtingen (Daan, 10 okt): drie huisstijlen op dezelfde tokens. Zet data-richting op <html>, een module of een app.
   stil   = monochroom, typografie, één accent (Linear/Devin)
   team   = warmer, ronder, teamleden met een gezicht (Grok Bot)
   aurora = levend, stem-eerst, gradients (ChatGPT Voice)
   Alleen tokens veranderen; layout en componenten blijven gelijk. */
[data-richting='stil']   { --hue: 262; --leven: 0.2; --radius-scale: 0.8; --font-display: var(--font-sans); }
[data-richting='team']   { --hue: 242; --leven: 0.5; --radius-scale: 1.35; --font-display: 'Inter Tight Variable', var(--font-sans); }
[data-richting='aurora'] { --hue: 285; --leven: 1; --radius-scale: 1.2; --font-display: 'Fraunces Variable', var(--font-serif);
  --grad-a: oklch(0.62 0.22 var(--hue) / calc(.75 * var(--leven)));
  --grad-b: oklch(0.68 0.19 var(--hue-2) / calc(.55 * var(--leven)));
  --grad-c: oklch(0.72 0.16 var(--hue-3) / calc(.45 * var(--leven))); }
[data-theme='light'] [data-richting='aurora'], [data-theme='light'][data-richting='aurora'] {
  --grad-a: oklch(0.78 0.14 var(--hue) / calc(.8 * var(--leven)));
  --grad-b: oklch(0.84 0.12 var(--hue-2) / calc(.7 * var(--leven)));
  --grad-c: oklch(0.86 0.10 var(--hue-3) / calc(.6 * var(--leven))); }

/* Merk-teken per richting */
.s-merk-ring { border: 2px solid var(--fg); }
.s-merk-kern { background: var(--accent); }
[data-richting='aurora'] .s-merk-ring { border: 0; background: conic-gradient(from 0deg, oklch(0.75 0.18 var(--hue)), oklch(0.8 0.15 var(--hue-2)), oklch(0.78 0.14 var(--hue-3)), oklch(0.75 0.18 var(--hue))); filter: blur(.4px); }
[data-richting='aurora'] .s-merk-kern { background: oklch(1 0 0 / .35); }
[data-richting='team'] .s-merk-ring { border: 0; border-radius: 32%; background: conic-gradient(from 210deg, oklch(0.72 0.17 var(--hue)), oklch(0.78 0.14 var(--hue-2)), oklch(0.72 0.17 var(--hue))); }
[data-richting='team'] .s-merk-kern { display: none; }
[data-richting='team'] .s-merk-teken::after { content: 'S'; position: absolute; inset: 0; display: grid; place-items: center; font: 700 .62em/1 var(--font-display); color: oklch(0.15 0.03 var(--hue)); }
[data-richting='stil'] .s-merk-naam { text-transform: lowercase; }

/* Personal (productkaart 10 okt; richting 13): warm papier als vlak, een accent dat los staat van akkoord (warn) en
   fout (err), Fraunces voor koppen. Het accent (--hue) is een keuze van Daan; de vlak-tint blijft warm. */
[data-richting='personal'] { --hue: 265; --hue-vlak: 70; --leven: 0.55; --radius-scale: 1.3; --font-display: 'Fraunces Variable', var(--font-serif); }
[data-theme='light'] [data-richting='personal'], [data-theme='light'][data-richting='personal'] {
  --bg:   oklch(0.972 0.010 var(--hue-vlak));
  --bg-1: oklch(0.986 0.007 var(--hue-vlak));
  --bg-2: oklch(0.995 0.004 var(--hue-vlak));
  --bg-3: oklch(0.950 0.012 var(--hue-vlak));
  --bg-4: oklch(0.918 0.015 var(--hue-vlak));
  --line: oklch(0.35 0.03 var(--hue-vlak) / .10);
  --line-2: oklch(0.35 0.03 var(--hue-vlak) / .16);
  --fg:   oklch(0.22 0.015 var(--hue-vlak));
  --fg-2: oklch(0.44 0.018 var(--hue-vlak));
  --fg-3: oklch(0.49 0.018 var(--hue-vlak));
  --grad-a: oklch(0.84 0.13 var(--hue-vlak) / calc(.95 * var(--leven)));
  --grad-b: oklch(0.82 0.12 calc(var(--hue-vlak) - 45) / calc(.75 * var(--leven)));
  --grad-c: oklch(0.82 0.10 var(--hue) / calc(.55 * var(--leven)));
  --grad-wacht: oklch(0.86 0.13 75 / calc(.9 * var(--leven))); }
[data-theme='dark'] [data-richting='personal'], [data-theme='dark'][data-richting='personal'] {
  --bg:   oklch(0.165 0.010 var(--hue-vlak));
  --bg-1: oklch(0.195 0.012 var(--hue-vlak));
  --bg-2: oklch(0.225 0.014 var(--hue-vlak));
  /* donker: de gloed komt uit het accent (zoals 09), het papier geeft alleen een warme ondertoon */
  --grad-a: oklch(0.50 0.16 var(--hue) / calc(.50 * var(--leven)));
  --grad-b: oklch(0.48 0.13 calc(var(--hue) + 40) / calc(.36 * var(--leven)));
  --grad-c: oklch(0.52 0.06 var(--hue-vlak) / calc(.22 * var(--leven))); }

/* Thema's (Daan, 11 okt: "maak gewoon thema's"): het accent is een keuze van Daan, niet van de app. data-accent op <html>
   wint van de richting. Elk accent blijft los van warn (80) en err (25): terracotta is daarom stoffig (lage chroma, donkerder),
   zodat een primaire knop nooit als gevaar-knop leest naast een foutkaart. */
[data-accent='indigo']     { --hue: 265 !important; }
[data-accent='petrol']     { --hue: 220 !important; }
[data-accent='salie']      { --hue: 165 !important; }
[data-accent='terracotta'] { --hue: 42 !important; --accent: oklch(0.56 0.115 42) !important; --accent-2: oklch(0.49 0.115 42) !important; --accent-soft: oklch(0.56 0.115 42 / .10) !important; --accent-line: oklch(0.56 0.115 42 / .34) !important; }
[data-theme='dark'][data-accent='terracotta'] { --accent: oklch(0.72 0.10 48) !important; --accent-2: oklch(0.80 0.08 48) !important; --accent-soft: oklch(0.72 0.10 48 / .14) !important; --accent-line: oklch(0.72 0.10 48 / .38) !important; }
[data-accent='pruim']      { --hue: 330 !important; }
[data-accent='inkt']       { --hue: 255 !important; --accent: oklch(0.32 0.04 255) !important; --accent-2: oklch(0.24 0.04 255) !important; --accent-soft: oklch(0.32 0.04 255 / .08) !important; --accent-line: oklch(0.32 0.04 255 / .3) !important; }
[data-theme='dark'][data-accent='inkt'] { --accent: oklch(0.92 0.01 255) !important; --accent-2: oklch(0.98 0 0) !important; --accent-ink: oklch(0.18 0.02 255) !important; --accent-soft: oklch(0.92 0.01 255 / .1) !important; --accent-line: oklch(0.92 0.01 255 / .3) !important; }

/* krant = De Krant (spoor 20, richting 06): ochtendpapier en inkt. Geen gradients, bijna geen ronding, sterke regels, serif.
   Koel papier met inktblauw accent (geen crème/terracotta). De kleuren worden hier opnieuw gezet omdat --bg/--fg op :root
   al met de Aurora-hue zijn uitgerekend; alleen --hue overschrijven zou niets doen. Beide thema's. */
[data-richting='krant'] {
  --hue: 252; --leven: 0; --radius-scale: 0.25;
  --font-display: 'Instrument Serif', 'Fraunces Variable', Georgia, serif;
  --font-serif: 'Fraunces Variable', 'Iowan Old Style', Georgia, serif;
  --bg: oklch(0.175 0.010 252); --bg-1: oklch(0.2 0.011 252); --bg-2: oklch(0.225 0.012 252); --bg-3: oklch(0.255 0.013 252);
  --line: oklch(0.92 0.01 252 / .10); --line-2: oklch(0.92 0.01 252 / .18); --line-3: oklch(0.92 0.01 252 / .55);
  --fg: oklch(0.94 0.006 252); --fg-2: oklch(0.80 0.010 252); --fg-3: oklch(0.70 0.012 252); --fg-inv: oklch(0.18 0.012 252);
  --accent: oklch(0.78 0.10 245); --accent-2: oklch(0.86 0.07 245); --accent-ink: oklch(0.18 0.03 245);
  --accent-soft: oklch(0.78 0.10 245 / .12); --accent-line: oklch(0.78 0.10 245 / .40); --sel: oklch(0.78 0.10 245 / .22);
  --grad-a: transparent; --grad-b: transparent; --grad-c: transparent;
  background: var(--bg); color: var(--fg);
}
[data-theme='light'] [data-richting='krant'], [data-theme='light'][data-richting='krant'] {
  --bg: oklch(0.982 0.004 252); --bg-1: oklch(0.993 0.002 252); --bg-2: oklch(1 0 0); --bg-3: oklch(0.955 0.006 252);
  --line: oklch(0.22 0.02 252 / .10); --line-2: oklch(0.22 0.02 252 / .18); --line-3: oklch(0.22 0.02 252 / .62);
  --fg: oklch(0.19 0.016 255); --fg-2: oklch(0.36 0.016 255); --fg-3: oklch(0.47 0.014 255); --fg-inv: oklch(0.99 0 0);
  --accent: oklch(0.47 0.15 255); --accent-2: oklch(0.40 0.15 255); --accent-ink: oklch(0.99 0 0);
  --accent-soft: oklch(0.47 0.15 255 / .08); --accent-line: oklch(0.47 0.15 255 / .32); --sel: oklch(0.47 0.15 255 / .14);
}
[data-richting='krant'] ::selection { background: var(--sel); }

/* Atelier (productkaart v2, 11 okt; richting 15): de werkplaats. Donker eerst: koel grafiet als vlak zodat de varianten
   (draaiende code) het licht geven; amber werklicht (--hue 48) als accent voor gekozen, spelden en aandacht. Space Grotesk
   voor koppen en variantlabels. Licht = atelier-wit (warm papier), accent dieper amber zodat knoppen leesbaar blijven. */
[data-richting='atelier'] { --hue: 58; --hue-vlak: 260; --leven: 0.85; --radius-scale: 1; --font-display: 'Space Grotesk Variable', var(--font-sans); }
[data-theme='dark'] [data-richting='atelier'], [data-theme='dark'][data-richting='atelier'] {
  --bg:   oklch(0.150 0.010 var(--hue-vlak));
  --bg-1: oklch(0.180 0.011 var(--hue-vlak));
  --bg-2: oklch(0.210 0.012 var(--hue-vlak));
  --bg-3: oklch(0.250 0.013 var(--hue-vlak));
  --bg-4: oklch(0.300 0.014 var(--hue-vlak));
  --accent:      oklch(0.80 0.15 var(--hue));
  --accent-2:    oklch(0.86 0.12 var(--hue));
  --accent-ink:  oklch(0.20 0.05 var(--hue));
  --accent-soft: oklch(0.80 0.15 var(--hue) / .14);
  --accent-line: oklch(0.80 0.15 var(--hue) / .42);
  --sel: oklch(0.80 0.15 var(--hue) / .14);
  --grad-a: oklch(0.62 0.14 var(--hue) / calc(.34 * var(--leven)));
  --grad-b: oklch(0.55 0.10 calc(var(--hue) + 30) / calc(.22 * var(--leven)));
  --grad-c: oklch(0.45 0.05 var(--hue-vlak) / calc(.30 * var(--leven))); }
[data-theme='light'] [data-richting='atelier'], [data-theme='light'][data-richting='atelier'] {
  --hue-vlak: 70;
  --bg:   oklch(0.965 0.008 var(--hue-vlak));
  --bg-1: oklch(0.982 0.006 var(--hue-vlak));
  --bg-2: oklch(0.994 0.003 var(--hue-vlak));
  --bg-3: oklch(0.940 0.010 var(--hue-vlak));
  --bg-4: oklch(0.905 0.012 var(--hue-vlak));
  --fg:   oklch(0.21 0.015 var(--hue-vlak));
  --fg-2: oklch(0.43 0.018 var(--hue-vlak));
  --fg-3: oklch(0.49 0.018 var(--hue-vlak));
  --accent:      oklch(0.58 0.14 var(--hue));
  --accent-2:    oklch(0.50 0.14 var(--hue));
  --accent-ink:  oklch(0.99 0 0);
  --accent-soft: oklch(0.58 0.14 var(--hue) / .12);
  --accent-line: oklch(0.58 0.14 var(--hue) / .38);
  --sel: oklch(0.58 0.14 var(--hue) / .10);
  --grad-a: oklch(0.86 0.12 var(--hue) / calc(.6 * var(--leven)));
  --grad-b: oklch(0.88 0.08 calc(var(--hue) + 30) / calc(.4 * var(--leven)));
  --grad-c: oklch(0.90 0.05 var(--hue-vlak) / calc(.4 * var(--leven))); }

/* Library (richting 16): de galerij. Licht eerst: wit papier, zwarte tekst, één accent jade (--hue 160) voor gekeurd, systeem
   en selectie; Instrument Serif voor koppen en tellingen. Donker = museum bij nacht: beelden houden hun eigen licht. */
[data-richting='library'] { --hue: 160; --hue-vlak: 160; --leven: 0.2; --radius-scale: 0.6; --font-display: 'Instrument Serif', var(--font-serif); }
[data-theme='light'] [data-richting='library'], [data-theme='light'][data-richting='library'] {
  --bg:   oklch(0.985 0.002 var(--hue-vlak));
  --bg-1: oklch(1 0 0);
  --bg-2: oklch(1 0 0);
  --bg-3: oklch(0.960 0.003 var(--hue-vlak));
  --bg-4: oklch(0.930 0.004 var(--hue-vlak));
  --line:   oklch(0.2 0.01 var(--hue-vlak) / .09);
  --line-2: oklch(0.2 0.01 var(--hue-vlak) / .15);
  --fg:   oklch(0.17 0.005 var(--hue-vlak));
  --fg-2: oklch(0.40 0.008 var(--hue-vlak));
  --fg-3: oklch(0.48 0.010 var(--hue-vlak));
  --accent:      oklch(0.50 0.12 var(--hue));
  --accent-2:    oklch(0.43 0.12 var(--hue));
  --accent-soft: oklch(0.50 0.12 var(--hue) / .10);
  --accent-line: oklch(0.50 0.12 var(--hue) / .36);
  --sel: oklch(0.50 0.12 var(--hue) / .09);
  --grad-a: oklch(0.88 0.06 var(--hue) / calc(.7 * var(--leven)));
  --grad-b: oklch(0.90 0.04 calc(var(--hue) + 40) / calc(.5 * var(--leven)));
  --grad-c: oklch(0.93 0.02 var(--hue-vlak) / calc(.5 * var(--leven))); }
[data-theme='dark'] [data-richting='library'], [data-theme='dark'][data-richting='library'] {
  --bg:   oklch(0.17 0.004 var(--hue-vlak));
  --bg-1: oklch(0.20 0.005 var(--hue-vlak));
  --bg-2: oklch(0.23 0.005 var(--hue-vlak));
  --bg-3: oklch(0.27 0.006 var(--hue-vlak));
  --bg-4: oklch(0.32 0.007 var(--hue-vlak));
  --accent:      oklch(0.78 0.12 var(--hue));
  --accent-2:    oklch(0.85 0.10 var(--hue));
  --accent-ink:  oklch(0.18 0.04 var(--hue));
  --accent-soft: oklch(0.78 0.12 var(--hue) / .14);
  --accent-line: oklch(0.78 0.12 var(--hue) / .40);
  --sel: oklch(0.78 0.12 var(--hue) / .14);
  --grad-a: oklch(0.45 0.08 var(--hue) / calc(.4 * var(--leven)));
  --grad-b: oklch(0.40 0.05 calc(var(--hue) + 40) / calc(.3 * var(--leven)));
  --grad-c: oklch(0.35 0.02 var(--hue-vlak) / calc(.3 * var(--leven))); }