/* YourDutchJob design tokens — the single source of truth for colour, type and
   spacing. Every page links this FIRST, then css/base.css, then its own sheet.
   Before this existed the palette was copy-pasted into an inline <style> in all
   87 pages, so changing one shade meant an 87-file find-and-replace.

   Reference: Dutch editorial/modernist practice — sturdy serif over a
   grotesque, hairline rules, flag blue with red as a signal only. Deliberately
   NOT the Rijksoverheid house style: a private board dressed as government
   would imply an IND endorsement we do not have. */

:root {
  /* ink */
  --ink:        #101418;   /* headings, table text */
  --ink-60:     #3c444e;   /* body copy */
  --ink-40:     #6b737d;   /* meta, labels, disclosed-nothing states */

  /* ground */
  --paper:      #ffffff;
  --paper-2:    #f4f5f3;   /* page ground behind cards */
  --paper-3:    #f9faf8;   /* nested wells */
  --line:       #dfe2e0;   /* hairline rules, card borders */
  --line-soft:  #eef0ed;   /* row separators */
  --line-input: #d3d6d2;

  /* blue carries every action */
  --blue:       #1b3c77;
  --blue-dark:  #12294f;
  --blue-tint:  #edf1f8;   /* selected row, panels */
  --blue-line:  #c3d0e6;

  /* red is recency and errors ONLY — never decoration */
  --red:        #b02333;
  --red-ink:    #8d1b28;
  --red-tint:   #fbeced;

  /* type */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans:  'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --t-display: 54px;
  --t-h1:      40px;
  --t-h2:      25px;
  --t-h3:      19px;
  --t-body:    16px;
  --t-ui:      14px;
  --t-ui-sm:   13px;
  --t-meta:    12.5px;
  --t-label:   11.5px;

  /* spacing scale — 4 8 12 16 24 32 48 */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  --radius: 4px;
  --page-max: 1280px;
  --page-pad: 56px;
}

@media (max-width: 760px) {
  :root {
    --t-display: 34px;
    --t-h1:      28px;
    --t-h2:      21px;
    --page-pad:  20px;
  }
}