/*
 * Design Tokens — Martha Kindercoaching
 * ----------------------------------------
 * Merk-tokens overgenomen uit de Lovable-bron (homepage-spec.md, Tailwind @theme).
 * oklch met hex als referentie in comment. Refereer in componenten altijd via var(--...).
 */

:root {

  /* ============================================
   * MERK-TOKENS (uit de Lovable-bron, verbatim)
   * ============================================ */

  --radius: 1rem;

  --cream:      oklch(0.965 0.012 85);    /* #F5EFE6 zachte crème */
  --cream-soft: color-mix(in oklab, var(--cream) 60%, transparent);  /* bron: bg-[var(--cream)]/60 */
  --sage:       oklch(0.81 0.115 130);    /* #A8C66C appeltjesgroen, accent + tints */
  --sage-deep:  oklch(0.66 0.13 132);     /* donkergroen: knop, eyebrows, iconen, vinkjes, hero-titel */
  --taupe:      oklch(0.72 0.022 65);     /* #B8A999 */
  --ink:        oklch(0.36 0.005 280);    /* #4A4A4A tekstkleur */

  --background:       oklch(1 0 0);       /* wit */
  --foreground:       var(--ink);
  --border:           oklch(0.91 0.012 80);
  --muted-foreground: oklch(0.5 0.012 80);

  /* ============================================
   * HEADER-KLEUREN (geprikt uit het ontwerp)
   * ============================================ */

  --color-wordmark:      oklch(0.45 0.012 80);   /* logo-tekst */
  --color-menu:          oklch(0.5 0.01 80);     /* menu-items */

  /* ============================================
   * TYPOGRAFIE
   * ============================================ */

  --font-heading:    'Poppins', system-ui, -apple-system, sans-serif;
  --font-body:       'Open Sans', system-ui, -apple-system, sans-serif;

  /* Weights */
  --font-regular:    400;
  --font-medium:     500;
  --font-semibold:   600;
  --font-bold:       700;
  --font-extrabold:  700;   /* Poppins lokaal tot 700; extrabold valt terug op bold */

  /* Sizes */
  --text-xs:      12px;
  --text-eyebrow: 13px;   /* uppercase labels boven koppen */
  --text-sm:      14px;
  --text-base:   16px;
  --text-lg:     18px;
  --text-xl:     22px;
  --text-2xl:    28px;
  --text-3xl:    36px;
  --text-4xl:    48px;
  --text-5xl:    64px;

  /* Line heights */
  --leading-none:     1;
  --leading-tight:    1.2;
  --leading-normal:   1.5;
  --leading-relaxed:  1.65;

  /* Letter spacing */
  --tracking-tight:   -0.01em;   /* koppen, conform spec */
  --tracking-normal:  0;
  --tracking-wide:    0.08em;     /* eyebrows (uppercase labels) */

  /* ============================================
   * SPACING — 4px schaal
   * ============================================ */

  --space-1:     4px;
  --space-2:     8px;
  --space-3:     12px;
  --space-4:     16px;
  --space-5:     20px;
  --space-6:     24px;
  --space-8:     32px;
  --space-10:    40px;
  --space-12:    48px;
  --space-16:    64px;
  --space-20:    80px;
  --space-24:    96px;
  --space-32:    128px;

  /* ============================================
   * LAYOUT
   * ============================================ */

  --container-max:        72rem;   /* 1152px — gelijk aan .container-soft */
  --section-padding-y:    80px;
  --section-padding-x:    24px;
  --btn-height:           46px;

  /* ============================================
   * EFFECTEN
   * ============================================ */

  --shadow-sm:    0 1px 2px oklch(0 0 0 / 0.05);
  --shadow-md:    0 4px 6px oklch(0 0 0 / 0.07);
  --shadow-lg:    0 10px 15px oklch(0 0 0 / 0.1);

  --radius-sm:    0.5rem;                      /* 8px */
  --radius-md:    var(--radius);               /* 16px */
  --radius-lg:    calc(var(--radius) * 1.5);   /* 24px */
  --radius-xl:    calc(var(--radius) * 1.75);  /* 28px */
  --radius-full:  9999px;

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}