/* Roelofsen Bloemen, design-tokens: DE ENE BRON.
   Dit is het enige :root-blok in het project. Elke layout laadt fonts.css en tokens.css VOOR de eigen
   stylesheet (admin.css, site.css, error.css). Geen hardcoded kleuren buiten dit bestand.
   Contrast (WCAG AA) is per gebruikt paar nagerekend; zie de opmerkingen bij de tokens. */
:root {
  /* Merk (Roelofsen groen) */
  --brand: #7BB661;          /* vlakken met --ink als tekst (7,2:1) */
  --brand-hover: #5E9647;    /* hover van brand-knoppen, met --ink (4,9:1) */
  --brand-deep: #3F6A2F;     /* tekst en links op wit (6,3:1) en creme (5,9:1); zijbalk met --on-deep */
  --brand-soft: #E8F1E0;     /* zachte vlakken; --brand-deep erop 5,5:1 */

  /* Vlakken */
  --canvas: #FFFFFF;
  --cream: #F9F7F4;
  --cream-deep: #F5EFE2;

  /* Tekst en lijnen */
  --ink: #1A1A1A;
  --muted: #5C5750;          /* 6,6:1 op --cream */
  --line: #E8E4DE;
  --line-strong: #D6D0C6;
  --on-deep: #F9F7F4;        /* tekst op --brand-deep (5,9:1) */
  --on-deep-muted: #E8F1E0;  /* secundaire tekst op --brand-deep (5,5:1) */

  /* Semantisch (tekst op het bijbehorende lichte vlak, alle paren boven 6:1) */
  --success: #3F6A2F;
  --success-light: #E8F1E0;
  --warning: #7A4B00;
  --warning-light: #FFF4DB;
  --error: #A4261D;
  --error-light: #FBEAE8;
  --info: #1F5A85;
  --info-light: #E6F0F7;

  /* Alpha-tokens: de enige toegestane transparante kleuren */
  --deep-raise: rgba(249, 247, 244, 0.10);   /* hover op --brand-deep */
  --scrim: rgba(26, 26, 26, 0.6);            /* overlay achter vensters en de mobiele zijbalk (UX 2026-11-06: dim rond 70 procent, de vraag is de enige figuur) */
  --scrim-sterk: rgba(20, 20, 20, 0.88);     /* achter de fotoviewer: de foto staat centraal */
  --focus-ring: #3F6A2F;     /* review 11: dekkend (= --brand-deep, 6,3:1 op wit); de oude rgba(.45) haalde 1,45:1 en moet 3:1 */
  --namens-h: 104px;         /* review 11: de namensbalk onderaan (92 px op 390 px) plus marge, voor scroll-padding */

  /* Typografie */
  --font-sans: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;

  /* Radii, schaduw, beweging */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 9999px;
  --elev-card: 0 1px 2px rgba(26, 26, 26, 0.06), 0 1px 3px rgba(26, 26, 26, 0.05);
  --elev-modal: 0 18px 50px rgba(26, 26, 26, 0.18);
  --t-base: 150ms ease;

  /* Layout */
  --zijbalk-b: 248px;
  --bovenbalk-h: 64px;
  --pagina-max: 1200px;

  /* ================= Winkel (site.css) =================
     Namen zoals in het Claude Design-project "Roelofsen bloemen nieuwe shop 2026" (colors_and_type.css),
     zodat de winkel-CSS een op een op het design aansluit. Waar het design dezelfde kleur gebruikt als de basis
     hierboven, verwijst de token ernaar. Tekstkleuren zijn op wit nagerekend (WCAG AA). */
  --color-brand-green: var(--brand);
  --color-brand-green-dark: var(--brand-hover);
  --color-brand-green-deep: var(--brand-deep);
  --color-brand-green-deeper: #2F5325;        /* hover op deep-knoppen */
  --color-brand-green-soft: var(--brand-soft);
  --color-nav-bg: var(--ink);                 /* footer */
  --color-bg: var(--canvas);
  --color-bg-soft: var(--cream);
  --color-promo-bg: var(--cream-deep);
  --color-text-primary: var(--ink);
  --color-text-secondary: #555555;            /* 7,5:1 op wit */
  --color-text-muted: #767676;                /* 4,5:1 op wit, maar 4,2:1 op --cream: alleen op wit gebruiken; het design had #999 (2,8:1) */
  --color-text-muted-soft: #6E6963;           /* gedempte tekst op creme vlakken: 5,1:1 op --cream, 5,4:1 op wit */
  --color-text-price: #C8372D;                /* 5,1:1 op wit */
  --color-text-inverse: #FFFFFF;
  --color-btn-primary-bg: var(--ink);
  --color-btn-primary-hover: #333333;
  --color-border: var(--line);
  --color-border-soft: #EEE9E2;
  --color-selector-border: #DDDDDD;
  --color-selector-active: var(--brand-deep);    /* gekozen formaat, kaartje of extra: groene rand en vinkje (Roy 2026-11-07) */
  --color-selector-active-bg: var(--brand-soft);
  --color-placeholder-bg: #EFEAE3;
  --flag-rood: #AE1C28;
  /* Kleurbolletjes in het kleurfilter */
  --kleur-rood: #C8372D;
  --kleur-roze: #E98DB0;
  --kleur-wit: #FFFFFF;
  --kleur-geel: #F2C230;
  --kleur-oranje: #EE8A3A;
  --kleur-paars: #8B5CB8;
  --kleur-blauw: #4F7FC8;
  --kleur-pastel-1: #F6C9D6;
  --kleur-pastel-2: #D8E6F6;
  --kleur-warm-1: #D9642B;
  --kleur-warm-2: #B8412E;
  --flag-wit: #FFFFFF;
  --flag-blauw: #21468B;

  /* Op donker (footer) en over foto's */
  --on-dark-strong: #FFFFFF;
  --on-dark-text: rgba(255, 255, 255, 0.75);
  --on-dark-link: rgba(255, 255, 255, 0.65);
  --on-dark-faint: rgba(255, 255, 255, 0.55);
  --on-dark-line: rgba(255, 255, 255, 0.10);
  --on-dark-line-strong: rgba(255, 255, 255, 0.20);
  --on-dark-fill: rgba(255, 255, 255, 0.08);
  --photo-scrim-start: rgba(26, 26, 26, 0);
  --photo-scrim-end: rgba(26, 26, 26, 0.55);
  --glass: rgba(255, 255, 255, 0.96);
  --hero-packshot-bg: #F7F7F7;                /* achtergrond van de Fleurop-packshots (244 tot 247): de hero-kaart sluit erop aan */
  /* Vervaging (--cream) achter de hero-tekst op mobiel, over de foto heen */
  --hero-vervaag-sterk: rgba(249, 247, 244, 0.92);
  --hero-vervaag: rgba(249, 247, 244, 0.75);
  --hero-vervaag-0: rgba(249, 247, 244, 0);

  /* Typografie winkel */
  --font-body: var(--font-sans);
  --font-script: var(--font-sans);            /* geen schrijfletter: de tagline staat in Nunito Sans cursief (self-hosted) */
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;

  /* Maten, radii, schaduw, beweging winkel */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-full: 9999px;
  --shadow-card: 0 6px 20px rgba(26, 26, 26, 0.08);
  --shadow-hover: 0 10px 28px rgba(26, 26, 26, 0.12);
  --shadow-soft: 0 6px 24px rgba(26, 26, 26, 0.06);
  --container-max: 1280px;
  --container-pad: clamp(1rem, 4vw, 2rem);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 150ms;
  --dur-base: 200ms;
}

/* ================= Beheer (opbouw Channeliser, kleuren Roelofsen; besluit Roy 2026-10-11) =================
   Binnen body.adm (layouts Admin, Auth, Ipad, Bezorgen). Groen en beige blijven; alleen lettertype, schaduw en de
   donkergroene zijbalk zijn eigen beheertokens. Contrast: --adm-op-zijbalk op --adm-zijbalk 12:1. */
.adm {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --elev-card: 0 1px 3px rgba(26, 26, 26, 0.06), 0 1px 2px rgba(26, 26, 26, 0.04);
  --elev-hover: 0 4px 12px rgba(26, 26, 26, 0.08), 0 2px 4px rgba(26, 26, 26, 0.04);

  /* Zijbalk: diep Roelofsen-groen, het lichte merkgroen als accent */
  --adm-zijbalk: #24391D;
  --adm-zijbalk-rand: rgba(249, 247, 244, 0.06);
  --adm-zijbalk-raise: rgba(249, 247, 244, 0.08);
  --adm-zijbalk-actief: rgba(123, 182, 97, 0.22);
  --adm-op-zijbalk: #F9F7F4;
  --adm-op-zijbalk-zacht: rgba(249, 247, 244, 0.72);

  /* Iconentegels in kaarten: zacht vlak met de kleur erop */
  --adm-tegel-groen: #E8F1E0;
  --adm-tegel-beige: #F5EFE2;
  --adm-tegel-oranje: #FBEBDD;
  --adm-oranje: #9A4A12;     /* op --adm-tegel-oranje 6,2:1 */
  --adm-bruin: #6B5A3A;      /* op --adm-tegel-beige 6,0:1 */
  --adm-primair-hover: #335826;  /* hover van primaire knoppen (wit erop 8,1:1) */
  --adm-rij-hover: #FCFBF9;
}

/* ================= Winkelapp (iPad in de winkel, design "iPad Orderinvoer" 2026-10-12) =================
   Binnen body.wa (layouts/Ipad.cfm). Nunito Sans en de winkelkleuren; deze tokens zijn de extra vlakken uit het
   design. Contrast: --wa-tint met --brand-deep 5,7:1; status-tekst op status-vlak boven 5:1. */
.wa {
  --wa-bg: var(--cream);
  --wa-kaart: #FFFFFF;
  --wa-tint: #EEF5EA;               /* gekozen knop, actieve tab, geselecteerde rij */
  --wa-lijn: var(--line);
  --wa-lijn-licht: #F0ECE8;
  --wa-tekst: var(--ink);
  --wa-tekst-2: #555555;            /* 7,5:1 op wit */
  --wa-tekst-3: #6B6560;            /* 5,7:1 op wit, 5,4:1 op --cream, 5,2:1 op --wa-tint (het oude #767676 haalde op creme maar 4,2:1) */
  --wa-leeg: #8C867C;               /* "nog niet ingevuld" in het overzicht (3,6:1, grote rustige tekst) */
  --wa-placeholder: #8F897F;
  --wa-rondje: #C9C4BA;
  --wa-schakel-uit: #D8D3CA;
  --wa-uit: #CFCAC0;                /* uitgeschakelde hoofdknop */
  --wa-fout: #A0432F;
  --wa-fout-vlak: #FBEDEA;
  --wa-toast: #1F2A1A;
  --wa-st-nieuw: #FFF1D6;   --wa-st-nieuw-tekst: #7A4F00;
  --wa-st-plan: #E6EEF9;    --wa-st-plan-tekst: #2D5491;
  --wa-st-klaar: var(--wa-tint); --wa-st-klaar-tekst: var(--brand-deep);
  --wa-st-weg: #F3F1EE;     --wa-st-weg-tekst: #5C5750;
  --wa-rit-ok-vlak: #F3F8EF; --wa-rit-ok-rand: #CFE3C4;      /* strook Vandaag nog bezorgen (design 2026-10-30) */
  --wa-rit-nee-vlak: #FCF3EF; --wa-rit-nee-rand: #EFD3C7; --wa-rit-nee: #9A3E25; --wa-rit-nee-stip: #C2573A;
  --wa-rit-lijn: #DDD8CE;
  --wa-retour-vlak: #FBF0E9; --wa-retour-rand: #E9C9B5; --wa-retour: #8A3F1C;
  --wa-tag-maat: #F4EFE6; --wa-tag-maat-tekst: #7A5B2E;         /* Binderij-kaarten (design 2026-10-30) */
  --wa-tag-kaart: #FBEFF1; --wa-tag-kaart-tekst: #9A3B52;
  --wa-tag-let: #FFF4DA; --wa-tag-let-tekst: #6B4600;
  --wa-kaartje-vlak: #FBF8F3; --wa-kaartje-rand: #EDE5D6;
  --wa-donker: #1F2A1A;
  --wa-donker-knop: rgba(255, 255, 255, 0.12);   /* een knop op de donkere scanbalk (review 10) */
  --wa-ring-leeg: #E6E1D8;                         /* voortgangsring Binderij: het lege deel */
  --wa-focus: rgba(123, 182, 97, 0.28);   /* alleen nog als zachte halo (box-shadow) naast een dekkende rand of outline */
  --wa-schaduw: 0 1px 3px rgba(26, 26, 26, 0.08);
  --wa-schaduw-toast: 0 10px 30px rgba(26, 26, 26, 0.25);
  --wa-rail: 84px;
  --wa-zij: 340px;
}

/* ================= Bezorgapp (web, 2026-10-14): dezelfde opmaak als de scanner-app =================
   Binnen body.ba (layouts/Bezorgapp.cfm). Kleuren gelijk aan het design "Zebra Bezorg-app" en de Android-app
   (android/.../ui/Thema.kt, object Kleur): beige grond, witte balken en kaarten, diepgroene hoofdknop, gele scanknop.
   --ba-gedempt staat op AA (het design had #999). */
.ba {
  --ba-font: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --ba-bg: #F6F4EF;
  --ba-wit: #FFFFFF;
  --ba-zacht: #F9F7F4;
  --ba-rand: #E8E4DE;
  --ba-rand-licht: #F0ECE8;
  --ba-tekst: #1A1A1A;
  --ba-tekst-2: #555555;
  --ba-gedempt: #6B6560;            /* 5,2:1 op --ba-bg, 5,4:1 op --ba-zacht, 5,7:1 op wit (het oude #767676 haalde op --ba-bg maar 4,1:1) */
  --ba-plaats: #8F897F;
  --ba-groen: #7BB661;
  --ba-groen-diep: #3F6A2F;
  --ba-tint: #EEF5EA;
  --ba-tint-licht: #F4F9F1;
  --ba-tint-rand: #CFE3C4;
  --ba-klaar: #FAF9F6;
  --ba-geel: #F2C230;
  --ba-geel-druk: #D9A917;
  --ba-geel-vlak: #FFFBEA;
  --ba-geel-rand: #D9C27A;
  --ba-op-geel: #1D1D1B;
  --ba-notitie: #FFF6D8;
  --ba-notitie-tekst: #7A5A00;
  --ba-retour: #A0522D;
  --ba-retour-vlak: #FBF0E9;
  --ba-retour-tekst: #8A3F1C;
  --ba-fout: #B4432F;
  --ba-fout-vlak: #FBEDEA;
  --ba-uit: #CFCAC0;
  --ba-uit-tekst: #BEB8AD;
  --ba-toast: #1F2A1A;
  --ba-rondje: #C9C4BA;
  --ba-op-groen-zacht: rgba(255, 255, 255, 0.88);
  --ba-op-groen-lijn: rgba(255, 255, 255, 0.25);
  --ba-focus: rgba(63, 106, 47, 0.45);
  --ba-schaduw-hoog: 0 10px 30px rgba(17, 17, 17, 0.25);
  --ba-r12: 12px;
  --ba-r14: 14px;
  --ba-r18: 18px;
}