/* ============================================================
   SNIJERS TUINEN — st-root.css
   v5.0 — 2026-08-14

   Centraal token-document. Enige bron voor kleur, tekst en border.
   Laadt vóór st-styles.css.

   CHANGELOG v4.1 -> v5.0
   - tomato-jam vervallen
   - drie getinte vlakken toegevoegd (wash-leaf, -warm, -cool);
     de pagina bestond uit wit met twee donkere banden

   CHANGELOG v4.1 -> v5.0
   - tomato-jam vervallen; peach-ink neemt de accentrol over
   - offerte-band naar peach-ink (wit 5.45:1)
   - gebruiksregel 6 toegevoegd na een fout: .st-button-invert
     gebruikte --st-clr-surface en --st-clr-ink-strong, die binnen
     een donkere band allebei naar wit gaan. Wit op wit is 1.0:1

   CHANGELOG v4.0 -> v4.1
   - border-ui toegevoegd; silver haalt 2.00:1 en mag geen
     bedienbaar element begrenzen

   CHANGELOG v3.5 -> v4.0
   - dark-spruce en tomato-jam toegevoegd; powder-blush en
     willow-green-2 vervallen
   - alle negen kleuren hebben nu een actieve rol; in v3.x lagen
     er vier stil
   - donkere band van iron-grey naar dark-spruce. Dat lost meteen
     de eyebrow op: willow haalt op iron-grey 4.45:1 en zakt door
     AA, op dark-spruce 4.91:1 en haalt het
   - gedempte tekst afgeleid uit grey; de rauwe kleur haalt 4.01:1
   - tomato-jam is de eerste accentkleur die zonder afgeleide
     tekst kan dragen: 5.52:1 beide richtingen
   ============================================================ */

/* ============================================================
   1. PALET
   Ratio's tegen --st-white (#fefefe).
   ============================================================ */

:root {
  --st-spruce:    #244721;   /* 10.42:1  donker anker, merkgroen  */
  --st-iron-grey: #434645;   /*  9.46:1  bodytekst                */
  --st-grey:      #7d7f7c;   /*  4.01:1  randen; tekst via mix    */
  --st-jungle:    #4b9744;   /*  3.58:1  vlak en grote tekst      */
  --st-peach:     #de6b48;   /*  3.30:1  warm accent, decoratief  */
  --st-willow:    #8cc05a;   /*  2.12:1  op licht decoratief,     */
                             /*          op dark-spruce 4.91:1    */
  --st-silver:    #b6b7b2;   /*  2.00:1  rand                     */
  --st-alabaster: #dadbd8;   /*  1.38:1  verzonken vlak           */
  --st-white:     #fefefe;
}

/* ------------------------------------------------------------
   Afgeleide waarden.

   Drie palettkleuren kunnen hun rol niet rechtstreeks vervullen:

     grey als gedempte tekst      4.01:1  te licht
     peach als knopvulling        3.30:1  te licht
     jungle als knopvulling       3.58:1  te licht

   De mixen hieronder houden de tint vast en schuiven mee als de
   bronkleur wijzigt.

     --st-ink-quiet   #5e5f5d   6.37 op wit, 4.62 op alabaster
     --st-peach-ink   #a65036   5.45 beide richtingen
     --st-spruce-deep #1d391a  hover, dieper dan spruce
   ------------------------------------------------------------ */

:root {
  --st-ink-quiet:   color-mix(in srgb, var(--st-grey) 75%, #000);
  --st-peach-ink:   color-mix(in srgb, var(--st-peach) 75%, #000);
  --st-spruce-deep: color-mix(in srgb, var(--st-spruce) 80%, #000);

  /* Getinte vlakken. Zonder deze wordt de pagina één wit veld met
     twee donkere banden ertussen. Elke tint houdt iron-grey boven
     de 8:1, dus lopende tekst blijft overal ruim binnen AA.

       wash-leaf  #e9f2e8   iron-grey 8.33
       wash-warm  #faece8   iron-grey 8.28
       wash-cool  #f1f3f1   iron-grey 8.56  */
  --st-wash-leaf: color-mix(in srgb, var(--st-jungle) 12%, var(--st-white));
  --st-wash-warm: color-mix(in srgb, var(--st-peach) 12%, var(--st-white));
  --st-wash-cool: color-mix(in srgb, var(--st-spruce) 6%, var(--st-white));
}

/* ============================================================
   2. KLEUR — semantische rollen

   Elke kleur uit sectie 1 heeft hier werk. Wat waar mag:

     kleine tekst op wit    spruce, iron-grey, ink-quiet, peach-ink
     grote tekst op wit     + jungle, peach, grey
     vlak met witte tekst   spruce, iron-grey, peach-ink
     tekst op dark-spruce   wit, alabaster, silver, willow
     nooit tekst            willow op licht, silver, alabaster
   ============================================================ */

:root {
  /* Tekst */
  --st-clr-ink:        var(--st-iron-grey);   /*  9.46 */
  --st-clr-ink-strong: var(--st-spruce);      /* 10.42 */
  --st-clr-ink-accent: var(--st-peach-ink);   /*  5.45 */
  --st-clr-ink-muted:  var(--st-ink-quiet);   /*  6.37 */
  --st-clr-ink-leaf:   var(--st-spruce);      /* 10.42 */
  --st-clr-ink-invert: var(--st-white);

  /* Links. Spruce tegen bodytekst is 1.10:1 — onderstreping is
     het enige werkende onderscheid, kleur alleen voldoet niet
     aan WCAG 1.4.1. */
  --st-clr-link:       var(--st-spruce);
  --st-clr-link-hover: var(--st-peach-ink);

  /* Vlakken die tekst dragen */
  --st-clr-surface:       var(--st-white);
  --st-clr-surface-sunk:  var(--st-alabaster);      /* ink 6.86 */
  --st-clr-surface-soft:  var(--st-alabaster-up);
  --st-clr-surface-dark:  var(--st-spruce);         /* wit 10.42 */
  --st-clr-surface-deep:  var(--st-spruce-deep);
  --st-clr-surface-quiet: var(--st-iron-grey);      /* wit  9.46 */
  --st-clr-surface-warm:  var(--st-peach-ink);      /* wit  5.45 */
  --st-clr-surface-cta:   var(--st-peach-ink);      /* wit  5.45 */
  --st-clr-surface-wash:  var(--st-wash-leaf);
  --st-clr-surface-wash-warm: var(--st-wash-warm);
  --st-clr-surface-wash-cool: var(--st-wash-cool);

  /* Decoratief: randen, iconen, lijnen, markeringen. 3:1 volstaat
     voor grafische elementen, dus deze mogen hier wel. */
  --st-clr-accent:       var(--st-jungle);
  --st-clr-accent-soft:  var(--st-willow);
  --st-clr-accent-warm:  var(--st-peach);

  /* Focus */
  --st-clr-focus:        var(--st-spruce);
  --st-clr-focus-invert: var(--st-willow);

  /* Overlays. Uit spruce, zodat beeld en merk dezelfde ondertoon
     delen zonder dat groen grauw wordt. */
  --st-clr-scrim-soft: rgb(36 71 33 / 0.18);
  --st-clr-scrim:      rgb(36 71 33 / 0.55);
  --st-clr-scrim-deep: rgb(36 71 33 / 0.82);
}

/* ============================================================
   3. TEKST
   ============================================================ */

:root {
  --st-ff-heading: "Archivo", system-ui, -apple-system, "Segoe UI",
                   "Helvetica Neue", Helvetica, Arial, sans-serif;
  --st-ff-body:    "Public Sans", system-ui, -apple-system, "Segoe UI",
                   Helvetica, Arial, sans-serif;
  --st-ff-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --st-fs-300: clamp(0.75rem,   0.734rem + 0.078vw, 0.8125rem); /* 12 -> 13 */
  --st-fs-400: clamp(0.875rem,  0.844rem + 0.156vw, 1rem);      /* 14 -> 16 */
  --st-fs-500: clamp(0.9375rem, 0.891rem + 0.234vw, 1.125rem);  /* 15 -> 18 */
  --st-fs-600: clamp(1.0625rem, 1.016rem + 0.234vw, 1.25rem);   /* 17 -> 20 */
  --st-fs-700: clamp(1.25rem,   1.156rem + 0.469vw, 1.625rem);  /* 20 -> 26 */
  --st-fs-800: clamp(1.875rem,  1.688rem + 0.938vw, 2.625rem);  /* 30 -> 42 */
  --st-fs-900: clamp(2.5rem,    1.938rem + 2.813vw, 4.75rem);   /* 40 -> 76 */

  --st-fw-regular:  400;
  --st-fw-medium:   500;
  --st-fw-semibold: 600;
  --st-fw-bold:     700;

  --st-lh-tight: 1.15;
  --st-lh-snug:  1.3;
  --st-lh-base:  1.65;
  --st-lh-loose: 1.8;

  --st-ls-tight:  -0.02em;
  --st-ls-base:   0;
  --st-ls-wide:   0.14em;
  --st-ls-wider:  0.16em;
  --st-ls-button: 0.06em;

  --st-measure:        65ch;
  --st-measure-narrow: 55ch;
}

/* ============================================================
   4. BORDER
   ============================================================ */

:root {
  --st-border-width:       1px;
  --st-border-width-thick: 2px;
  --st-border-width-rule:  4px;

  /* WCAG 1.4.11 eist 3:1 voor de begrenzing van een bedienbaar
     element. Silver haalt 2.00 en alabaster 1.38: die twee mogen
     alleen scheidingslijnen zijn die geen component afbakenen.
     Alles wat klikbaar of invulbaar is krijgt border-ui. */
  --st-clr-border:        var(--st-silver);      /* 2.00 scheidingslijn */
  --st-clr-border-soft:   var(--st-alabaster);   /* 1.38 haarlijn       */
  --st-clr-border-ui:     var(--st-grey);        /* 4.01 kaart, input   */
  --st-clr-border-strong: var(--st-grey);        /* alias van border-ui */
  --st-clr-border-brand:  var(--st-spruce);
  --st-clr-rule-on-dark:  color-mix(in srgb, var(--st-white) 24%, transparent);

  --st-radius-none: 0;
  --st-radius-sm:   0.275rem;
  --st-radius-md:   1rem;
  --st-radius-lg:   2rem;
  --st-radius-pill: 9999px;

  --st-shadow-sm: 0 1px 2px rgb(36 71 33 / 0.08);
  --st-shadow-md: 0 10px 25px rgb(36 71 33 / 0.10);
  --st-shadow-lg: 0 20px 50px rgb(36 71 33 / 0.14);
}

/* ============================================================
   5. RUIMTE EN LAYOUT
   Ladder en gutter overgenomen uit de iWorkers-stylesheet.
   ============================================================ */

:root {
  --st-space-3xs: clamp(0.25rem, 0.22rem + 0.13vw, 0.31rem);
  --st-space-2xs: clamp(0.5rem,  0.46rem + 0.22vw, 0.625rem);
  --st-space-xs:  clamp(0.75rem, 0.68rem + 0.36vw, 0.94rem);
  --st-space-s:   clamp(1rem,    0.91rem + 0.45vw, 1.25rem);
  --st-space-m:   clamp(1.5rem,  1.36rem + 0.71vw, 1.88rem);
  --st-space-l:   clamp(2rem,    1.82rem + 0.89vw, 2.5rem);
  --st-space-xl:  clamp(3rem,    2.73rem + 1.34vw, 3.75rem);
  --st-space-2xl: clamp(4rem,    3.64rem + 1.79vw, 5rem);
  --st-space-3xl: clamp(6rem,    5.46rem + 2.68vw, 7.5rem);

  /* Wijzig de breedte in GP Customizer, niet hier. */
  --st-container:        var(--gb-container-width, 1600px);
  --st-container-narrow: 760px;
  --st-gutter:           clamp(1.25rem, 4vw, 3rem);
}

/* ============================================================
   6. MOTION, STAPELING, ONDERBALK
   ============================================================ */

:root {
  --st-transition-fast: 150ms ease;
  --st-transition-base: 250ms ease;
  --st-transition-slow: 400ms cubic-bezier(0.22, 1, 0.36, 1);

  --st-z-base:      0;
  --st-z-raised:    1;
  --st-z-header:    100;
  --st-z-bottombar: 150;
  --st-z-overlay:   200;
  --st-z-modal:     300;
  --st-z-tooltip:   400;

  /* Nul op desktop, zodat elke berekening die eraan hangt daar
     vanzelf wegvalt. st-styles.css zet de waarde onder 48em. */
  --st-bottombar-height: 0rem;
  --st-bottombar-inset:  0px;
}

/* ============================================================
   7. GEBRUIKSREGELS
   Volgen uit de meting, niet uit smaak.

   1. Kleine tekst op wit: alleen spruce, iron-grey, ink-quiet
      of peach-ink. Jungle (3.58), peach (3.30) en grey (4.01)
      zakken door 4.5:1 en mogen daar alleen als grote tekst
      of als grafisch element.

   2. Een vlak met witte tekst: spruce, iron-grey of peach-ink.
      Rauwe jungle en peach dragen geen tekst.

   6. Een knop die binnen een donkere sectie omkeert, verwijst
      naar het rauwe palet — niet naar --st-clr-ink-strong of
      andere contexttokens. Die worden in die scope zelf naar wit
      omgezet, en dan staat er wit op een lichte vulling.

   3. Op dark-spruce: wit, alabaster, silver en willow halen AA.
      Peach zakt daar naar 3.15 en jungle naar 2.91.

   4. Links binnen lopende tekst zijn altijd onderstreept.
      Spruce tegen de bodykleur is 1.10:1.

   5. Tekst over foto's is niet te meten. De sluier moet daarom
      een gegarandeerde ondergrens hebben, niet een percentage
      dat van het beeld afhangt — zie .st-hero-stage.
   ============================================================ */

/* ============================================================
   8. ALIASLAAG — GeneratePress variabelenamen

   Houdt de bestaande blockmarkup en de kleurinstellingen in
   generate_settings werkend nu GP Global Colors leeg is.

   LET OP: form_button_background_color staat op
   var(--global-color-7) met witte tekst. Rauwe peach haalt daar
   3.30:1. Zet die instelling op var(--st-clr-surface-warm) en de
   hover op var(--st-clr-surface-warm).
   ============================================================ */

:root {
  --base-3:          var(--st-white);
  --contrast:        var(--st-iron-grey);
  --contrast-3:      var(--st-silver);
  --accent:          var(--st-jungle);
  --global-color-5:  var(--st-willow);
  --global-color-6:  var(--st-spruce);
  --global-color-7:  var(--st-peach);
  --global-color-8:  var(--st-peach-ink);
  --global-color-9:  var(--st-alabaster);
  --global-color-10: var(--st-grey);
}