/* ============================================================
   HUISSTIJL — Design Tokens
   Van der Valk Luxembourg · Biometha · CALM
   ------------------------------------------------------------
   Eén gedeeld fundament. Per merk een accent. Light + dark.
   Wijzig hier en het werkt overal door.
   ------------------------------------------------------------
   REGEL — meng kleuren altijd `in oklab`, nooit `in oklch`.
   oklch is een poolruimte: color-mix interpoleert de hue over de
   kortste hoekboog. De neutralen hier zijn warm beige (hue ~75-82)
   en de accenten liggen ver daarvandaan, dus die boog loopt door
   kleuren die in geen van beide zitten. Voorbeeld: surf-blauw
   (hue 240) 14% in de donkere surface (hue 75) gaf hue 98 —
   olijfgroen in plaats van een zachte blauwtint. In light mode is
   surface wit, en white heeft hue 0, dus daar liep elke menging
   naar roze. Het raakte alle merken en ook --info-soft/--danger-soft.
   oklab is dezelfde waarneming-uniforme ruimte maar rechthoekig
   (L/a/b): geen hue-boog, dus de tint blijft die van het accent.
   Percentages en lichtheid gedragen zich verder identiek.
   ============================================================ */

/* ---- 1. Lettertypes ------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---- Type families ------------------------------------ */
  --font-display: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Type scale (1.20 ratio, 16px base) --------------- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */
  --text-5xl:  4rem;      /* 64 */

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  /* ---- Spacing (4px base) ------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ---- Radii -------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* ---- Beige neutralen (warm, hue ~80) ------------------ */
  /* --n-0 is wit; de hue 82 is bij chroma 0 visueel irrelevant maar
     houdt de schaal consistent, zodat een menging in een poolruimte
     hier geen roze zwiep maakt (zie de regel bovenaan). */
  --n-0:   oklch(1 0 82);
  --n-50:  oklch(0.975 0.013 82);
  --n-100: oklch(0.955 0.017 82);
  --n-200: oklch(0.915 0.018 82);
  --n-300: oklch(0.855 0.018 82);
  --n-400: oklch(0.700 0.016 82);
  --n-500: oklch(0.575 0.014 80);
  --n-600: oklch(0.475 0.012 78);
  --n-700: oklch(0.385 0.011 76);
  --n-800: oklch(0.270 0.010 75);
  --n-900: oklch(0.195 0.009 75);
  --n-950: oklch(0.140 0.008 75);

  /* ---- Semantische statuskleuren (gedeeld lichtniveau) -- */
  --success:  oklch(0.58 0.12 150);
  --warning:  oklch(0.70 0.13 75);
  --danger:   oklch(0.56 0.16 27);
  --info:     oklch(0.58 0.10 235);

  /* ---- Elevatie / schaduw (warm getint) ----------------- */
  --shadow-xs: 0 1px 2px oklch(0.2 0.01 75 / 0.06);
  --shadow-sm: 0 1px 3px oklch(0.2 0.01 75 / 0.08), 0 1px 2px oklch(0.2 0.01 75 / 0.05);
  --shadow-md: 0 4px 12px oklch(0.2 0.01 75 / 0.09), 0 2px 4px oklch(0.2 0.01 75 / 0.05);
  --shadow-lg: 0 12px 32px oklch(0.2 0.01 75 / 0.12), 0 4px 8px oklch(0.2 0.01 75 / 0.06);
  --shadow-xl: 0 24px 56px oklch(0.2 0.01 75 / 0.16);

  --ring: 0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);

  --transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   2. SEMANTISCHE ROLLEN — LICHT (standaard)
   ============================================================ */
:root,
[data-theme='light'] {
  --bg:           var(--n-50);
  --surface:      var(--n-0);
  --surface-2:    var(--n-100);
  --surface-3:    var(--n-200);
  --border:       var(--n-200);
  --border-strong:var(--n-300);
  --text:         var(--n-900);
  --text-muted:   var(--n-600);
  --text-subtle:  var(--n-500);
  --text-inverse: var(--n-50);

  --success-soft: color-mix(in oklab, var(--success) 14%, var(--surface));
  --warning-soft: color-mix(in oklab, var(--warning) 18%, var(--surface));
  --danger-soft:  color-mix(in oklab, var(--danger) 13%, var(--surface));
  --info-soft:    color-mix(in oklab, var(--info) 13%, var(--surface));
}

/* ============================================================
   3. SEMANTISCHE ROLLEN — DONKER
   ============================================================ */
[data-theme='dark'] {
  --bg:           var(--n-950);
  --surface:      var(--n-900);
  --surface-2:    var(--n-800);
  --surface-3:    var(--n-700);
  --border:       color-mix(in oklab, var(--n-700) 70%, transparent);
  --border-strong:var(--n-600);
  --text:         var(--n-50);
  --text-muted:   var(--n-300);
  --text-subtle:  var(--n-400);
  --text-inverse: var(--n-950);

  --success-soft: color-mix(in oklab, var(--success) 22%, var(--surface));
  --warning-soft: color-mix(in oklab, var(--warning) 22%, var(--surface));
  --danger-soft:  color-mix(in oklab, var(--danger) 22%, var(--surface));
  --info-soft:    color-mix(in oklab, var(--info) 22%, var(--surface));

  --shadow-sm: 0 1px 3px oklch(0 0 0 / 0.4);
  --shadow-md: 0 4px 12px oklch(0 0 0 / 0.45);
  --shadow-lg: 0 12px 32px oklch(0 0 0 / 0.5);
  --shadow-xl: 0 24px 56px oklch(0 0 0 / 0.55);
}

/* ============================================================
   4. MERK-ACCENTEN
   Eén familie, vijf smaken. Hue varieert, lichtheid blijft
   in dezelfde range zodat ze bij elkaar horen.
   ------------------------------------------------------------
   valk      → groen + goud (Van der Valk) — standaard
   biometha  → oranje (duurzame energie)
   calm      → serene blauw
   surf      → oceaanblauw + goud
   croissant → karamel/bruin + crème
   ============================================================ */

/* Standaard accent = Van der Valk
   Primair = groen (natuurlijk, ecologisch).
   accent-2 = beige/zand — voor warme details en highlights. */
:root,
[data-brand='valk'] {
  --accent:            oklch(0.515 0.098 150);
  --accent-hover:      oklch(0.450 0.098 150);
  --accent-contrast:   var(--n-0);
  --accent-2:          #bb9a61;   /* officiële Van der Valk-goudtint */
  --accent-2-contrast: var(--n-900);
}
[data-brand='biometha'] {
  --accent:            #F47C20;   /* officiële Biometha-oranje */
  --accent-hover:      #d96a12;
  --accent-contrast:   var(--n-0);
  --accent-2:          oklch(0.60 0.105 145);  /* groen — duurzame energie */
  --accent-2-contrast: var(--n-0);
}
[data-brand='calm'] {
  --accent:            oklch(0.55 0.105 233);
  --accent-hover:      oklch(0.49 0.105 233);
  --accent-contrast:   var(--n-0);
  --accent-2:          oklch(0.80 0.075 210);
  --accent-2-contrast: var(--n-900);
}
[data-brand='surf'] {
  --accent:            oklch(0.62 0.175 240);  /* levendig oceaanblauw */
  --accent-hover:      oklch(0.55 0.175 240);
  --accent-contrast:   var(--n-0);
  --accent-2:          #b88a44;                /* goud uit het Surf-logo */
  --accent-2-contrast: var(--n-0);
}
[data-brand='croissant'] {
  --accent:            oklch(0.545 0.095 62);  /* gebakken karamel/bruin */
  --accent-hover:      oklch(0.475 0.095 62);
  --accent-contrast:   var(--n-0);
  --accent-2:          oklch(0.885 0.045 82);  /* crème / tarwe */
  --accent-2-contrast: var(--n-900);
}

/* Accenten in dark mode iets lichter voor leesbaarheid */
[data-theme='dark'][data-brand='valk'],
[data-theme='dark']:root {
  --accent:       oklch(0.66 0.105 150);
  --accent-hover: oklch(0.72 0.100 150);
}
[data-theme='dark'][data-brand='biometha'] {
  --accent:       #F78B3A;
  --accent-hover: #ffa24f;
}
[data-theme='dark'][data-brand='calm'] {
  --accent:       oklch(0.68 0.105 233);
  --accent-hover: oklch(0.74 0.100 233);
}
[data-theme='dark'][data-brand='surf'] {
  --accent:       oklch(0.72 0.165 240);
  --accent-hover: oklch(0.78 0.150 240);
}
[data-theme='dark'][data-brand='croissant'] {
  --accent:       oklch(0.70 0.090 64);
  --accent-hover: oklch(0.76 0.085 64);
}

/* Afgeleide accent-tinten — passen zich automatisch aan thema aan.
   Mengen in oklab, niet oklch: zie de regel bovenaan dit bestand. */
:root {
  --accent-soft:    color-mix(in oklab, var(--accent) 14%, var(--surface));
  --accent-softer:  color-mix(in oklab, var(--accent) 7%, var(--surface));
  --accent-border:  color-mix(in oklab, var(--accent) 32%, var(--border));
  --accent-2-soft:  color-mix(in oklab, var(--accent-2) 60%, var(--surface));
}