/* =========================================================
   Beetstra Training — Design Tokens
   Overgenomen uit het Claude Design-project "Beetstra Training Design System"
   (colors_and_type.css). Bron van waarheid: branding/huisstijl.md +
   shared/src/constants/theme.ts.

   Enige wijziging t.o.v. het origineel: de @font-face-regels wijzen naar
   lokale woff2-subsets (latin) in ../fonts/ in plaats van de volledige
   ttf-familie. Raak de tokens hieronder niet aan — web-specifieke
   aanpassingen horen in site.css.
   ========================================================= */

@font-face { font-family: 'Poppins'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/Poppins-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 500; font-style: italic; font-display: swap; src: url('../fonts/Poppins-MediumItalic.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/Poppins-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/Poppins-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-style: normal; font-display: swap; src: url('../fonts/Poppins-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-style: italic; font-display: swap; src: url('../fonts/Poppins-ExtraBoldItalic.woff2') format('woff2'); }

:root {
  /* ─── Brand — Huisstijl ─────────────────────────── */
  --bt-black:  #252525;  /* Beetstra zwart (brand) */
  --bt-yellow: #F1C103;  /* Beetstra geel — primary accent */
  --bt-blue:   #2F4093;  /* Beetstra blauw — steun */
  --bt-gray:   #F5F5F5;  /* Beetstra grijs — steun (lightest brand value) */

  /* ─── Surfaces (dark mode, tonal layering — no borders) ─── */
  --bg:              #0F0F0F;  /* app canvas */
  --surface:         #1A1A1A;  /* standard card */
  --surface-lowest:  #0E0E0E;  /* inset wells */
  --surface-high:    #2A2A2A;  /* nested / hover */
  --surface-highest: #353534;

  /* Semantic aliases (primary scale) */
  --primary:       #F1C103;
  --primary-dark:  #C49A00;   /* pressed state */
  --on-primary:    #1A1500;   /* text on gold */

  /* ─── Text (never pure white) ─────────────────────── */
  --fg1: #F5F5F5;   /* primary text */
  --fg2: #A0A0A0;   /* secondary text */
  --fg3: #5A5A5A;   /* muted / captions */
  --fg-inverse: #0F0F0F;

  /* ─── Status ──────────────────────────────────────── */
  --success:     #22C55E;
  --error:       #C4918A;   /* muted rose, not bright red */
  --error-soft:  #FFB4AB;
  --warning:     #F1C103;
  --info:        #8AB4F8;

  /* ─── Borders & dividers ──────────────────────────── */
  --border:        #2A2A2A;
  --border-ghost:  rgba(154, 144, 120, 0.15);
  --divider:       #1A1A1A;

  /* ─── Radii ───────────────────────────────────────── */
  --r-s:    8px;    /* badge, tag, inline chip                */
  --r-l:    16px;   /* card, input, button, sheet — DEFAULT   */
  --r-full: 9999px; /* avatar, FAB, pill filter               */

  /* ─── Spacing (4pt base) ──────────────────────────── */
  --sp-xs:   4px;
  --sp-s:    8px;
  --sp-m:   12px;
  --sp-l:   16px;
  --sp-xl:  20px;
  --sp-2xl: 24px;
  --sp-3xl: 32px;
  --sp-4xl: 48px;

  /* ─── Elevation (tonal, not shadowy) ──────────────── */
  --shadow-ambient: 0 0 40px rgba(245,245,245,0.06);
  --shadow-gold:    0 8px 24px rgba(241,193,3,0.30);
  --shadow-fab:     0 4px 12px rgba(241,193,3,0.35);

  /* ─── Typography ──────────────────────────────────── */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, sans-serif;

  /* Type scale (matches theme.ts fontSize) */
  --fs-caption:    8px;
  --fs-badge:      9px;
  --fs-label:     10px;
  --fs-breadcrumb:10px;
  --fs-xs:        11px;
  --fs-s:         13px;
  --fs-m:         15px;
  --fs-l:         17px;
  --fs-xl:        18px;
  --fs-2xl:       20px;
  --fs-3xl:       24px;
  --fs-huge:      30px;
  --fs-title:     36px;   /* editorial title */

  /* Weights */
  --w-regular:   400;
  --w-medium:    500;
  --w-semibold:  600;
  --w-bold:      700;
  --w-extrabold: 800;
}

/* =========================================================
   Base element styles — semantic defaults
   ========================================================= */
html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Editorial title — de Beetstra-signatuur.
   ITALIC ExtraBold, uppercase — zoals het "BEETSTRA"-woordmerk. */
.bt-editorial-title,
h1.bt-display {
  font-family: var(--font-display);
  font-weight: var(--w-extrabold);
  font-style: italic;
  font-size: var(--fs-title);
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--fg1);
  margin: 0;
}

.bt-editorial-title .gold,
h1.bt-display .gold { color: var(--primary); }

/* Breadcrumb label boven de editorial title */
.bt-breadcrumb {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-breadcrumb);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg3);
}
.bt-breadcrumb.gold { color: var(--primary); }

/* Headings */
h1 { font-family: var(--font-display); font-weight: var(--w-extrabold); font-size: var(--fs-huge); line-height: 1.15; letter-spacing: -0.01em; color: var(--fg1); margin: 0 0 var(--sp-m); }
h2 { font-family: var(--font-display); font-weight: var(--w-bold);      font-size: var(--fs-3xl);  line-height: 1.2;  letter-spacing: -0.01em; color: var(--fg1); margin: 0 0 var(--sp-m); }
h3 { font-family: var(--font-display); font-weight: var(--w-bold);      font-size: var(--fs-2xl);  line-height: 1.25; color: var(--fg1); margin: 0 0 var(--sp-s); }
h4 { font-family: var(--font-display); font-weight: var(--w-semibold);  font-size: var(--fs-l);    color: var(--fg1); margin: 0 0 var(--sp-s); }

p        { color: var(--fg1); font-size: var(--fs-m); line-height: 1.55; margin: 0 0 var(--sp-m); }
p.muted  { color: var(--fg2); }
p.subtle { color: var(--fg3); font-size: var(--fs-s); }

/* Section label — uppercase grijze eyebrow */
.bt-section-label {
  font-family: var(--font-display);
  font-weight: var(--w-semibold);
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* Editorial accent (Poppins Medium Italic, geel) — zoals "TRAINING" in het woordmerk */
.bt-accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--w-medium);
  color: var(--primary);
}

small, .bt-caption {
  font-size: var(--fs-xs);
  color: var(--fg3);
}

/* Utility */
.bt-surface      { background: var(--surface);      border-radius: var(--r-l); padding: var(--sp-l); }
.bt-surface-high { background: var(--surface-high); border-radius: var(--r-l); padding: var(--sp-l); }
.bt-card         { background: var(--surface);      border-radius: var(--r-l); padding: var(--sp-l); }

/* Knoppen */
.bt-btn-primary {
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-s);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--r-l);
  padding: 16px 24px;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-s);
}
.bt-btn-secondary {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--primary);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--fs-s);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: var(--r-l);
  padding: 16px 24px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-s);
}