/* Theme tokens — the re-themeable layer, split from site.css
   (LOC-cap: css by surface). Load before site.css. */
:root {
  /* Brand tokens */
  --petrol:        #454545;
  --petrol-deep:   #363636;
  --petrol-soft:   #595959;
  --petrol-mist:   rgba(69, 69, 69, 0.08);

  --cream:         #e1e1e1;
  --cream-deep:    #cdcdcd;
  --cream-mist:    #ececec;

  --paper:         #f3f3f3;
  --paper-warm:    #f5f5f5;
  --white:         #ffffff;

  --ink:           #282828;
  --ink-soft:      #515151;
  --muted:         #7a7a7a;
  --line:          #d2d2d2;
  --line-soft:     rgba(69, 69, 69, 0.12);

  /* Typography */
  --font-script:   ui-sans-serif, system-ui, sans-serif;
  --font-display:  ui-serif, Georgia, 'Times New Roman', serif;
  --font-body:     ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Layout */
  --max-width:     1100px;
  --gutter:        1.25rem;
  --radius-pill:   999px;

  /* SHAPE vs COLOUR. A shadow's geometry and a corner's radius are shape --
     they follow the box's shape switches (data-vorm-* on <html>, see
     website/vormtaal.py). Only the shadow's COLOUR is the practice's, and it
     is a token like any other. Split on 2026-08-29: a practice was choosing
     the product's elevation by repainting its shadows, which is how two boxes
     ended up looking like the same system in two colours.
     --radius / --radius-lg / --shadow-* are defined per switch, below. */
  --schaduw-kleur: rgba(69, 69, 69, 0.09);
  --schaduw-kleur-zacht: rgba(69, 69, 69, 0.06);
  --easing:        cubic-bezier(0.4, 0, 0.2, 1);
  /* Warmer ease-out: long deceleration tail, feels less "engineered"
     and more "human" — used for hero welcome + section reveals. */
  --easing-soft:   cubic-bezier(0.22, 1, 0.36, 1);

  /* --- migrated colour tokens (value-preserving, approach A') --- */
  --amber-deep: #636363;
  --amber-deep-2: #5f5f5f;
  --amber-pale: #eeeeee;
  --amber-pale-2: #ededed;
  --black: #000000;
  --black-a05: rgba(0, 0, 0, 0.05);
  --black-a08: rgba(0, 0, 0, 0.08);
  --black-a14: rgba(0, 0, 0, 0.14);
  --cream-a18: rgba(225, 225, 225, 0.18);
  --cream-a28: rgba(225, 225, 225, 0.28);
  --cream-a35: rgba(225, 225, 225, 0.35);
  --cream-a50: rgba(225, 225, 225, 0.5);
  --error: #282828;
  --error-2: #282828;
  --gold: #a8a8a8;
  --ink-a45: rgba(40, 40, 40, 0.45);
  --maroon: #3e3e3e;
  --maroon-deep: #282828;
  --mint: #dcdcdc;
  --mint-deep: #bebebe;
  --mint-pale: #f3f3f3;
  --mint-pale-2: #f2f2f2;
  --mint-soft: #ededed;
  --paper-a00: rgba(243, 243, 243, 0);
  --paper-a85: rgba(243, 243, 243, 0.85);
  --paper-a95: rgba(243, 243, 243, 0.95);
  --paper-warm-a50: rgba(245, 245, 245, 0.5);
  --paper-warm-a70: rgba(245, 245, 245, 0.7);
  --peach-pale: #eeeeee;
  --petrol-a04: rgba(69, 69, 69, 0.04);
  --petrol-a10: rgba(69, 69, 69, 0.1);
  --petrol-a14: rgba(69, 69, 69, 0.14);
  --petrol-a16: rgba(69, 69, 69, 0.16);
  --petrol-a18: rgba(69, 69, 69, 0.18);
  --petrol-a20: rgba(69, 69, 69, 0.2);
  --petrol-a22: rgba(69, 69, 69, 0.22);
  --petrol-a26: rgba(69, 69, 69, 0.26);
  --petrol-a28: rgba(69, 69, 69, 0.28);
  --petrol-a42: rgba(69, 69, 69, 0.42);
  --petrol-a55: rgba(69, 69, 69, 0.55);
  --petrol-deep-a08: rgba(54, 54, 54, 0.08);
  --petrol-deep-a18: rgba(54, 54, 54, 0.18);
  --petrol-deep-a35: rgba(54, 54, 54, 0.35);
  --petrol-deep-a55: rgba(54, 54, 54, 0.55);
  --petrol-soft-a13: rgba(89, 89, 89, 0.13);
  --rose: #878787;
  --rose-pale: #ececec;
  --sage: #d1d1d1;
  --sage-a50: rgba(209, 209, 209, 0.5);
  --sage-pale: #e6e6e6;
  --sage-pale-2: #ededed;
  --sand: #f1f1f1;
  --sand-deep: #dadada;
  --sand-pale: #ededed;
  --sand-warm: #ebebeb;
  --success: #595959;
  --tan: #838383;
  --taupe: #a9a9a9;
  --taupe-2: #9a9a9a;
  --taupe-3: #aeaeae;
  --terracotta: #727272;
  --white-a18: rgba(255, 255, 255, 0.18);
  --white-a55: rgba(255, 255, 255, 0.55);
  --white-a85: rgba(255, 255, 255, 0.85);
  --white-a95: rgba(255, 255, 255, 0.95);

  /* --- migrated colour tokens (value-preserving, approach A') --- */
  --grey-96: #f7f7f7;

  /* --- migrated colour tokens (value-preserving, approach A') --- */
  --amber-99: #fdfdfd;
  --blue-19: #313131;
  --cool-39: #656565;
  --teal-40: #6d6d6d;
  --terracotta-77: #c7c7c7;
  --terracotta-87: #e0e0e0;
  --terracotta-94: #f0f0f0;
}