/* LM design tokens. Huisstijl: thema Schemer, de kleuren van flip-lak (violet, magenta, cyaan) op grafiet,
   in de structuur van voorstel B. Andere thema's (Instellingen → Uiterlijk) staan in themes.css en overschrijven
   alleen de kleuren hieronder. Regels: het accent betekent "leeft" (actief, nu, gezond). Amber = let op,
   rood = fout, altijd met icoon en woord; die twee zijn in elk thema gelijk. Geen koper of goud.
   Zie PLAN.md hoofdstuk 6. Alle kleuren van de app staan hier of in themes.css; styles.css gebruikt alleen tokens.

   --level (0 tot 1) is de schuif "Hoe fel": 0 = rustig, 1 = uitbundig. Alles wat "hoeveel" is (gloed, rand,
   waas, achtergrond, tempo) hangt eraan; de kleuren zelf niet. Standaard 0.2. */
:root {
  color-scheme: dark;
  --level: .2;

  /* Achtergrond en vlakken */
  --bg: #07060A;                     /* basis: grafiet met een vleug violet */
  --bg-2: #0C0A12;
  --bg-top: #0D0A15;                 /* bovenkant van de achtergrond */
  --surface: #15121D;                /* dichte kaart, zonder glas (toast, menu's) */
  --glass: rgba(20, 17, 29, .68);    /* zwevend glazen paneel */
  --glass-2: rgba(27, 22, 39, .58);
  --well: rgba(6, 5, 9, .64);        /* invulvelden en ingezonken vlakken */
  --bar-bg: linear-gradient(180deg, rgba(7, 6, 10, .93), rgba(7, 6, 10, .55));
  --scrim: rgba(4, 3, 7, .64);       /* achter een open venster */
  --line: rgba(196, 180, 245, calc(.08 + .07 * var(--level)));   /* randen en scheidingen */
  --line-2: rgba(196, 180, 245, calc(.2 + .14 * var(--level)));  /* nadruk-rand */
  --hover: rgba(196, 180, 245, .06);
  --code-bg: rgba(196, 180, 245, .08);
  --avatar-bg: linear-gradient(135deg, #3B1F7A, #0E5568);

  /* Sfeer: gloed en raster achter alles */
  --aura-1: rgba(124, 58, 237, calc(.08 + .18 * var(--level)));
  --aura-2: rgba(34, 211, 238, calc(.025 + .085 * var(--level)));
  --aura-3: rgba(217, 70, 239, calc(.03 + .1 * var(--level)));
  --aura-hue: calc(20deg + 50deg * var(--level));   /* hoe ver de achtergrond van tint verschuift */
  --grid-line: rgba(196, 180, 245, .026);

  /* Tekst */
  --text: #F0EEF7;
  --muted: #918BA4;
  --faint: #3E3A4C;

  /* Accent: leeft */
  --accent: #B9A0FF;
  --accent-dim: #8B5CF6;
  --accent-soft: rgba(139, 92, 246, calc(.1 + .06 * var(--level)));
  --accent-ring: rgba(167, 139, 250, .34);
  --glow: rgba(139, 92, 246, calc(.26 + .24 * var(--level)));
  --halo: rgba(139, 92, 246, .06);
  --on-accent: #0D0816;              /* tekst op een accentknop */

  /* Glans: vlakken met accent, tekst met glans, de rand die meekleurt en het licht onder de muis */
  --pearl: linear-gradient(110deg, #AE97FA 0%, #E084F5 25%, #74E1F2 55%, #8B92F4 80%, #AE97FA 100%);
  --pearl-text: linear-gradient(110deg, #F6F3FF 0%, #CDBBFF 28%, #F1B9F6 48%, #A9ECF7 70%, #F6F3FF 100%);
  --pearl-wash: linear-gradient(110deg, rgba(139, 92, 246, calc(.1 + .16 * var(--level))), rgba(217, 70, 239, calc(.05 + .11 * var(--level))), rgba(34, 211, 238, calc(.04 + .1 * var(--level))));
  --sheen-stops: #8B5CF6, #D946EF, #22D3EE, #6366F1, #A78BFA, #8B5CF6;
  --ring-op: calc(.06 + .3 * var(--level));          /* rand in rust */
  --ring-hover-op: 1;                                 /* rand onder de muis */
  --ring-speed: calc(28s - 14s * var(--level));       /* één rondje van de kleur over de rand */
  --spot-h1: 275;                    /* kleur van het licht: van tint h1 (links) naar h2 (rechts) */
  --spot-h2: 188;
  --spot-s: 85%;
  --spot-l: 66%;
  --spot-a: calc(.06 + .08 * var(--level));
  --tint-a-op: calc(.03 + .09 * var(--level));       /* waas over alle panelen */
  --tint-b-op: calc(.02 + .07 * var(--level));
  --spot: hsl(calc(var(--spot-h1) + (var(--spot-h2) - var(--spot-h1)) * var(--tilt, .5)) var(--spot-s) var(--spot-l) / var(--spot-a));
  /* Waas: twee tinten die meeschuiven met de muis (flip-lak) */
  --tint: linear-gradient(135deg,
    hsl(calc(var(--spot-h1) + (var(--spot-h2) - var(--spot-h1)) * var(--tilt, .5)) var(--spot-s) var(--spot-l) / var(--tint-a-op)),
    transparent 45%, transparent 60%,
    hsl(calc(var(--spot-h2) - (var(--spot-h2) - var(--spot-h1)) * var(--tilt, .5)) var(--spot-s) var(--spot-l) / var(--tint-b-op)));

  /* Status, altijd met icoon en woord (in elk thema gelijk) */
  --warn: #F5B942;
  --warn-soft: rgba(245, 185, 66, .12);
  --warn-line: rgba(245, 185, 66, .35);
  --bad: #FF5C6C;
  --bad-soft: rgba(255, 92, 108, .12);
  --bad-line: rgba(255, 92, 108, .35);
  --bad-glow: rgba(255, 92, 108, .5);

  /* Letters: Space Grotesk voor koppen, Inter voor tekst, JetBrains Mono voor tijden, cijfers en logs */
  --font-d: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-b: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Maat en vorm (rasterbasis 4 px) */
  --r-sm: 8px;
  --r: 10px;
  --r-lg: 14px;
  --gap: 16px;
  --shadow: 0 30px 80px -30px rgba(0, 0, 0, .95), inset 0 1px 0 rgba(255, 255, 255, .04);
  --ease: cubic-bezier(.2, .8, .2, 1);

  /* Veilige randen op de telefoon */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}