/* ============================================================
   in2ai — Design tokens
   Apple-structuur (rust, schaal, witruimte) + in2ai-blauw
   Blauwtinten gesampled uit het hexagon-logo:
     azuur #48A8D8 → mid #3078C0 → diep #184890 → donkerst #003686
   ============================================================ */
:root {
  /* --- Neutralen (Apple) --- */
  --bg:            #ffffff;
  --bg-alt:        #f5f5f7;   /* Apple-lichtgrijs, afwisselende secties */
  --bg-dark:       #0a1526;   /* diepe nachtblauwe sectie */
  --ink:           #1d1d1f;   /* primaire tekst */
  --ink-2:         #6e6e73;   /* secundaire tekst */
  --ink-3:         #86868b;   /* tertiair / labels */
  --hairline:      rgba(0, 0, 0, .10);
  --hairline-2:    rgba(0, 0, 0, .06);

  /* --- in2ai merk-blauw --- */
  --brand:         #1e6fc4;   /* actie-blauw: knoppen, links */
  --brand-hover:   #175a9f;
  --brand-strong:  #184890;
  --brand-azure:   #48a8d8;
  --brand-deep:    #0b2e5e;
  --brand-tint:    #eaf1fb;   /* zeer lichte blauwe wash */
  --brand-grad:    linear-gradient(135deg, #48a8d8 0%, #2b7cc9 46%, #184890 100%);
  --brand-glow:    radial-gradient(60% 60% at 50% 40%,
                     rgba(72,168,216,.45) 0%,
                     rgba(43,124,201,.28) 38%,
                     rgba(24,72,144,.10) 62%,
                     rgba(255,255,255,0) 78%);

  /* --- Typografie: systeem-stack => op macOS is dit San Francisco (SF Pro) --- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
          "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;

  /* Type-schaal (fluid, clamp) */
  --fs-hero:   clamp(2.75rem, 6.2vw, 5rem);     /* ~44 → 80px */
  --fs-h2:     clamp(2rem, 3.8vw, 3rem);        /* ~32 → 48px */
  --fs-h3:     clamp(1.375rem, 2vw, 1.75rem);   /* ~22 → 28px */
  --fs-lead:   clamp(1.125rem, 1.6vw, 1.4rem);  /* ~18 → 22px */
  --fs-body:   1.0625rem;                        /* 17px, Apple-body */
  --fs-small:  0.8125rem;                        /* 13px */

  --lh-tight:  1.06;
  --lh-snug:   1.18;
  --lh-body:   1.55;
  --tracking-tight: -0.022em;
  --tracking-h:     -0.012em;

  /* --- Ruimte & vorm --- */
  --maxw:       980px;    /* Apple-contentkolom */
  --maxw-wide:  1200px;
  --gut:        22px;     /* horizontale marge mobiel */
  --sec-pad:    clamp(72px, 11vw, 132px);  /* verticale sectie-padding */
  --radius:     18px;
  --radius-sm:  12px;
  --radius-pill: 980px;

  --shadow-sm:  0 1px 2px rgba(11,46,94,.05), 0 1px 1px rgba(0,0,0,.03);
  --shadow-card:0 2px 6px rgba(11,46,94,.06), 0 24px 48px -28px rgba(11,46,94,.30);
  --shadow-nav: 0 1px 0 var(--hairline-2);

  --ease:   cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme: dark) {
  /* PoC blijft licht (Apple-marketing is overwegend licht); dark-mode later. */
}