/* ================================================================
   AI Campaign Lab — Visual System
   Design tokens gebaseerd op Apple Human Interface Guidelines

   Filosofie:
   Clarity · Deference · Depth
   Elke pixel heeft een reden.
   ================================================================ */

:root {

  /* ── Apple kleurpalet ──────────────────────────────────────── */
  --black:       #000000;
  --gray-1:      #1d1d1f;   /* Apple's standaard "near-black" tekst */
  --gray-2:      #424245;
  --gray-3:      #6e6e73;   /* Secondaire tekst */
  --gray-4:      #86868b;   /* Tertiaire tekst */
  --gray-5:      #a1a1a6;
  --gray-6:      #d2d2d7;
  --gray-7:      #e8e8ed;
  --gray-8:      #f5f5f7;   /* Apple's lichte achtergrond */
  --gray-9:      #fbfbfd;   /* Apple's pagina-achtergrond */
  --white:       #ffffff;

  /* ── Systeemkleuren ────────────────────────────────────────── */
  --blue:        #0071e3;   /* Apple's primaire blauw */
  --blue-hover:  #0077ed;
  --blue-press:  #006edb;
  --blue-light:  #e8f0fd;
  --green:       #34c759;
  --green-light: #e8f8ed;
  --orange:      #ff9f0a;
  --orange-light:#fff4e0;
  --red:         #ff3b30;
  --red-light:   #ffeceb;

  /* ── Semantische aliassen ──────────────────────────────────── */
  --bg:          var(--gray-9);
  --surface:     var(--white);
  --surface-2:   var(--gray-8);
  --surface-3:   var(--gray-7);

  --text:        var(--gray-1);
  --text-2:      var(--gray-2);
  --muted:       var(--gray-3);
  --subtle:      var(--gray-4);

  --border:      rgba(0, 0, 0, 0.08);
  --border-2:    rgba(0, 0, 0, 0.12);
  --separator:   var(--gray-7);

  --accent:      var(--blue);
  --accent-lt:   var(--blue-light);

  /* ── Branch-kleur (per pagina via PHP inline style) ─────────── */
  /* Beperkt gebruik: alleen kleine accentindicatoren.             */
  --branch-color: var(--blue);

  /* ── Schaduwen — Apple gebruikt uiterst subtiele schaduwen ──── */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow:      0 2px 8px  rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:   0 8px 28px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.14), 0 4px 16px rgba(0, 0, 0, 0.08);

  /* ── Radii — Apple's exacte waarden ─────────────────────────── */
  --radius:      18px;
  --radius-sm:   12px;
  --radius-xs:   8px;
  --radius-pill: 980px;

  /* ── Typografie — SF Pro stack ───────────────────────────────── */
  --font:
    -apple-system,
    BlinkMacSystemFont,
    'SF Pro Display',
    'SF Pro Text',
    'Helvetica Neue',
    Arial,
    sans-serif;

  --font-mono:
    'SF Mono',
    'Fira Code',
    'Menlo',
    'Monaco',
    'Courier New',
    monospace;

  /* ── Easing — Apple's standaard curves ──────────────────────── */
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:    cubic-bezier(0.00, 0.00, 0.20, 1.00);
  --ease-spring: cubic-bezier(0.34, 1.20, 0.64, 1.00);

  /* ── Timing ──────────────────────────────────────────────────── */
  --duration-fast:   0.15s;
  --duration:        0.25s;
  --duration-slow:   0.40s;

  /* ── Spacing-schaal ──────────────────────────────────────────── */
  --space-xs:    4px;
  --space-sm:    8px;
  --space-md:    16px;
  --space-lg:    24px;
  --space-xl:    48px;

  /* ── Typografie-tokens (naast de .t-* utility-klassen) ───────── */
  --font-size-xs:   0.75rem;     /* 12px — caption/chip */
  --font-size-sm:   0.8125rem;   /* 13px — footnote */
  --font-size-md:   1.0625rem;   /* 17px — body */
  --font-size-lg:   1.3125rem;   /* 21px — headline */
  --font-size-xl:   1.5rem;      /* 24px — sectiekop */

  --font-weight-regular:  400;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  /* ── Semantische kleur-aliassen ──────────────────────────────── */
  --color-primary:  var(--blue);
  --color-accent:   var(--branch-color);
  --color-surface:  var(--surface);
  --color-text:     var(--text);

  /* ── Radii — aanvullende sm/md/lg-naamgeving ─────────────────── */
  /* (--radius-sm = 12px en --radius-xs = 8px staan hierboven)      */
  --radius-md:   16px;
  --radius-lg:   var(--radius);   /* 18px */
}

/* ─── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  font-size: 17px;             /* Apple's standaard body-grootte */
  line-height: 1.47059;        /* Apple's body line-height */
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ─── Typografie-hiërarchie ──────────────────────────────────── */
/*
  Apple gebruikt typografie als primair designelement.
  Ruimte en grootte communiceren hiërarchie — niet kleur.

  Display:   Heldenstuk,  ≥ 64px,  weight 700,  tracking -0.04em
  Title 1:   Paginatitel, ≥ 40px,  weight 700,  tracking -0.025em
  Title 2:   Sectietitel, ≥ 28px,  weight 600,  tracking -0.015em
  Headline:  Koptekst,    21px,    weight 600,  tracking -0.008em
  Body:      Lopende tekst 17px,   weight 400
  Footnote:  Kleine tekst, 13px,   weight 400
  Caption:   Label/chip,   12px,   weight 600,  tracking +0.01em uppercase
*/

.t-display {
  font-size: clamp(3.5rem, 8vw, 6.5rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.0;
}

.t-title-1 {
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.06;
}

.t-title-2 {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.12;
}

.t-headline {
  font-size: 1.3125rem;   /* 21px */
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.25;
}

.t-body {
  font-size: 1.0625rem;   /* 17px */
  font-weight: 400;
  line-height: 1.47;
}

.t-footnote {
  font-size: 0.8125rem;   /* 13px */
  font-weight: 400;
  line-height: 1.38;
}

.t-caption {
  font-size: 0.75rem;     /* 12px */
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ─── Layout ─────────────────────────────────────────────────── */
.page-wrap {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 22px 80px;
}

.page-wrap--wide   { max-width: 1200px; }
.page-wrap--narrow { max-width: 692px; }

/* ─── Utility ────────────────────────────────────────────────── */
.mt-4   { margin-top: 4px;   }
.mt-8   { margin-top: 8px;   }
.mt-12  { margin-top: 12px;  }
.mt-16  { margin-top: 16px;  }
.mt-24  { margin-top: 24px;  }
.mt-32  { margin-top: 32px;  }
.mt-48  { margin-top: 48px;  }
.mb-8   { margin-bottom: 8px;  }
.mb-16  { margin-bottom: 16px; }
.gap-8  { gap: 8px; }
.gap-16 { gap: 16px; }
.text-center { text-align: center; }
.mb-24  { margin-bottom: 24px; }
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.align-center    { align-items: center; }
.justify-between { justify-content: space-between; }
.text-muted      { color: var(--muted); }
.text-subtle     { color: var(--subtle); }
.text-sm         { font-size: 0.875rem; }
.text-xs         { font-size: 0.8125rem; }
.font-bold       { font-weight: 700; }
.font-semibold   { font-weight: 600; }
.hidden          { display: none !important; }
.grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.divider { border: none; border-top: 1px solid var(--separator); margin: 24px 0; }