/* ===========================================================================
   Tokens — ontwerpprincipes sections 2, 3 and 5.

   Two tiers. Component CSS may only use the semantic roles; the raw palette
   exists so the dark theme can be a short override instead of a second palette.
   =========================================================================== */

:root {
  /* --- Raw palette (section 2). Do not use these in component CSS. --- */
  --p-lint:        #154273;  /* lintblauw */
  --p-donker:      #01689b;  /* donkerblauw */
  --p-vlak:        #f2f6fa;  /* lichtblauw vlak */
  --p-hover:       #e6f0f7;  /* lichtblauw hover */
  --p-lijn:        #cce0ee;
  --p-wit:         #ffffff;
  --p-ink:         #0b1d2e;
  --p-ink-zacht:   #33475b;
  --p-ink-meta:    #4a5d72;
  --p-op-blauw:    #dce8f3;
  --p-placeholder: #5b6f85;

  /* --- Semantic roles --- */
  --surface-page:        var(--p-wit);
  --surface-tile:        var(--p-vlak);
  --surface-tile-hover:  var(--p-hover);
  --surface-brand:       var(--p-lint);
  --surface-brand-hover: var(--p-donker);
  --surface-band:        var(--p-lint);
  --surface-panel:       var(--p-wit);

  --rule:         var(--p-lijn);
  --rule-on-band: rgba(255, 255, 255, .35);

  --accent:       var(--p-donker);
  --accent-hover: var(--p-lint);

  --text:      var(--p-ink);
  --text-soft: var(--p-ink-zacht);
  --text-meta: var(--p-ink-meta);

  /* "Text on blue" is a context, not a colour — see .on-band in base.css. */
  --on-brand:      var(--p-wit);
  --on-brand-soft: var(--p-op-blauw);

  --field-bg:          var(--p-wit);
  --field-text:        var(--p-ink);
  --field-placeholder: var(--p-placeholder);

  --focus-ring: var(--p-donker);

  /* --- Type (section 3). Fira Sans only, no second family. --- */
  --font: 'Fira Sans', sans-serif;
  --fs-h1:      clamp(34px, 4.4vw, 62px);
  --fs-h2:      28px;
  --fs-h3:      20px;
  --fs-stat:    32px;
  --fs-step-nr: 60px;
  --fs-search:  21px;
  --fs-intro:   18px;
  --fs-tile:    17px;
  --fs-body:    16px;
  --fs-small:   15px;
  --fs-meta:    13px;

  /* --- Layout (section 5) --- */
  --wrap:   1240px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Vertical rhythm: 12 / 20 / 36 / 48. */
  --sp-1: 12px;
  --sp-2: 20px;
  --sp-3: 36px;
  --sp-4: 48px;

  /* Corners are square; the search pill and its panel are the only exceptions. */
  --radius-pill:  999px;
  --radius-panel: 18px;
}

/* Dark theme. A deliberate deviation from the blue-and-white rule — see README.
   It redefines the raw palette, so every role mapped from it follows along and
   the scope classes in base.css keep working. Only the roles that need a
   genuinely different mapping are restated.

   Note the figure/ground flip: in light mode a fundament tile is darker than
   the page, in dark mode it must be lighter. That is safe because shape, not
   shade, carries the meaning. */
html[data-theme="dark"] {
  --p-lint:        #1d4f7c;
  --p-donker:      #4ea7df;
  --p-vlak:        #12263a;
  --p-hover:       #19324a;
  --p-lijn:        #24435f;
  --p-wit:         #0b1a28;
  --p-ink:         #e8eff5;
  --p-ink-zacht:   #b8c9d8;
  --p-ink-meta:    #93a7b8;
  --p-op-blauw:    #a8c2d8;
  --p-placeholder: #7f94a8;

  --surface-band:        #08121c;
  --surface-brand-hover: #2a6395;
  --accent-hover:        #8fcae7;
  --rule-on-band:        rgba(255, 255, 255, .22);
  --on-brand:            #ffffff;
}

html[data-density="compact"] {
  --sp-1: 8px;
  --sp-2: 14px;
  --sp-3: 24px;
  --sp-4: 32px;
}