/* ============================================================
   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.
   ============================================================ */

/* ---- 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:   oklch(1 0 0);
  --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 oklch, 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 oklch, var(--success) 14%, var(--surface));
  --warning-soft: color-mix(in oklch, var(--warning) 18%, var(--surface));
  --danger-soft:  color-mix(in oklch, var(--danger) 13%, var(--surface));
  --info-soft:    color-mix(in oklch, 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 oklch, 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 oklch, var(--success) 22%, var(--surface));
  --warning-soft: color-mix(in oklch, var(--warning) 22%, var(--surface));
  --danger-soft:  color-mix(in oklch, var(--danger) 22%, var(--surface));
  --info-soft:    color-mix(in oklch, 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, drie smaken. Hue varieert, lichtheid blijft
   in dezelfde range zodat ze bij elkaar horen.
   ------------------------------------------------------------
   valk     → warm hospitality-rood
   biometha → groen (duurzame energie)
   calm     → serene blauw
   ============================================================ */

/* 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 */
:root {
  --accent-soft:    color-mix(in oklch, var(--accent) 14%, var(--surface));
  --accent-softer:  color-mix(in oklch, var(--accent) 7%, var(--surface));
  --accent-border:  color-mix(in oklch, var(--accent) 32%, var(--border));
  --accent-2-soft:  color-mix(in oklch, var(--accent-2) 60%, var(--surface));
}