/* ============================================================
   Holandês Online — Design Tokens
   Color, type, spacing, radii, shadows, motion.
   Source: HO Design System (claude.ai/design handoff).
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Color: Brand ---------- */

  /* Oranje — the Dutch national color, our primary. Warm, energetic, confident. */
  --ho-orange-50:  #FFF4EC;
  --ho-orange-100: #FFE3CE;
  --ho-orange-200: #FFC79C;
  --ho-orange-300: #FFA666;
  --ho-orange-400: #FF8838;
  --ho-orange-500: #F26B1F;
  --ho-orange-600: #D9540F;
  --ho-orange-700: #B0410A;
  --ho-orange-800: #82300A;
  --ho-orange-900: #4F1D08;

  /* Delft — deep Dutch blue, anchors the brand. Calm, scholarly, trustworthy. */
  --ho-delft-50:  #EEF3FB;
  --ho-delft-100: #D6E1F4;
  --ho-delft-200: #A9BFE7;
  --ho-delft-300: #7497D5;
  --ho-delft-400: #3F6FBF;
  --ho-delft-500: #1F4FA0;
  --ho-delft-600: #163C7E;
  --ho-delft-700: #102D5E;
  --ho-delft-800: #0A1E40;
  --ho-delft-900: #06122A;

  /* Polder — warm off-whites and earth tones, the canvas. */
  --ho-polder-50:  #FBF8F3;
  --ho-polder-100: #F4EFE6;
  --ho-polder-200: #E8DFCE;
  --ho-polder-300: #D4C5A8;
  --ho-polder-400: #B6A480;

  /* Ink — neutrals on the warm side, never pure black. */
  --ho-ink-50:  #F5F4F1;
  --ho-ink-100: #E8E5DE;
  --ho-ink-200: #C9C3B6;
  --ho-ink-300: #9E9685;
  --ho-ink-400: #6E6757;
  --ho-ink-500: #4A4538;
  --ho-ink-600: #2F2C24;
  --ho-ink-700: #1C1A14;
  --ho-ink-800: #110F0A;

  /* Accents — De Stijl palette */
  --ho-tulip:    #E63946;
  --ho-canal:    #5BA3A8;
  --ho-stroop:   #F2C14E;
  --ho-grass:    #4F8B3B;

  /* ---------- Semantic ---------- */
  --ho-bg:        var(--ho-polder-50);
  --ho-bg-raised: #FFFFFF;
  --ho-bg-sunken: var(--ho-polder-100);
  --ho-bg-invert: var(--ho-delft-800);

  --ho-fg:        var(--ho-ink-700);
  --ho-fg-muted:  var(--ho-ink-500);
  --ho-fg-subtle: var(--ho-ink-400);
  --ho-fg-invert: var(--ho-polder-50);

  --ho-border:        var(--ho-ink-100);
  --ho-border-strong: var(--ho-ink-200);
  --ho-border-focus:  var(--ho-orange-500);

  --ho-primary:        var(--ho-orange-500);
  --ho-primary-hover:  var(--ho-orange-600);
  --ho-primary-press:  var(--ho-orange-700);
  --ho-on-primary:     #FFFFFF;

  --ho-secondary:        var(--ho-delft-500);
  --ho-secondary-hover:  var(--ho-delft-600);
  --ho-secondary-press:  var(--ho-delft-700);
  --ho-on-secondary:     #FFFFFF;

  --ho-success: var(--ho-grass);
  --ho-warn:    var(--ho-stroop);
  --ho-danger:  var(--ho-tulip);
  --ho-info:    var(--ho-canal);

  /* ---------- Typography ---------- */
  --ho-font-display:      "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --ho-font-display-sans: "Inter", system-ui, sans-serif;
  --ho-font-body:         "Inter", system-ui, -apple-system, sans-serif;
  --ho-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* Type scale */
  --ho-text-xs:    12px;
  --ho-text-sm:    14px;
  --ho-text-base:  16px;
  --ho-text-md:    18px;
  --ho-text-lg:    20px;
  --ho-text-xl:    24px;
  --ho-text-2xl:   30px;
  --ho-text-3xl:   38px;
  --ho-text-4xl:   48px;
  --ho-text-5xl:   60px;
  --ho-text-6xl:   76px;
  --ho-text-7xl:   96px;

  --ho-leading-tight:  1.05;
  --ho-leading-snug:   1.2;
  --ho-leading-normal: 1.5;
  --ho-leading-loose:  1.7;

  --ho-tracking-tight:  -0.02em;
  --ho-tracking-snug:   -0.01em;
  --ho-tracking-normal: 0;
  --ho-tracking-wide:   0.04em;
  --ho-tracking-caps:   0.08em;

  /* ---------- Spacing (4-step) ---------- */
  --ho-sp-0:  0;
  --ho-sp-1:  4px;
  --ho-sp-2:  8px;
  --ho-sp-3:  12px;
  --ho-sp-4:  16px;
  --ho-sp-5:  24px;
  --ho-sp-6:  32px;
  --ho-sp-7:  48px;
  --ho-sp-8:  64px;
  --ho-sp-9:  96px;
  --ho-sp-10: 128px;

  /* ---------- Radii ---------- */
  --ho-radius-xs:   4px;
  --ho-radius-sm:   8px;
  --ho-radius-md:   12px;
  --ho-radius-lg:   18px;
  --ho-radius-xl:   28px;
  --ho-radius-pill: 999px;

  /* ---------- Shadows — warm blue-tinted, never gray ---------- */
  --ho-shadow-xs: 0 1px 2px rgba(16, 45, 94, 0.06);
  --ho-shadow-sm: 0 2px 6px rgba(16, 45, 94, 0.08);
  --ho-shadow-md: 0 6px 16px -4px rgba(16, 45, 94, 0.12), 0 2px 4px rgba(16, 45, 94, 0.06);
  --ho-shadow-lg: 0 18px 32px -10px rgba(16, 45, 94, 0.18), 0 4px 8px rgba(16, 45, 94, 0.06);
  --ho-shadow-xl: 0 28px 60px -16px rgba(16, 45, 94, 0.24), 0 8px 16px rgba(16, 45, 94, 0.08);
  --ho-shadow-inset: inset 0 1px 2px rgba(16, 45, 94, 0.08);

  /* ---------- Motion ---------- */
  --ho-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ho-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ho-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --ho-dur-1: 120ms;
  --ho-dur-2: 200ms;
  --ho-dur-3: 320ms;
  --ho-dur-4: 480ms;

  /* ---------- Layout ---------- */
  --ho-container:        1200px;
  --ho-container-narrow: 840px;
  --ho-gutter:           24px;
  --ho-sidebar-width:    248px;

  /* Section padding — clamp() maakt losse breakpoint-overrides overbodig */
  --ho-section-v: clamp(48px, 7vw, 80px);    /* vertical: 48px mob → 80px wide */
  --ho-section-h: clamp(16px, 4vw, 48px);    /* horizontal: 16px mob → 48px wide */
  --ho-hero-v:    clamp(64px, 9vw, 120px);   /* hero vertical: ruimer dan secties */
}