/* ============================================================
   BRICKFLEX — "Azuur & zon" recolor override
   Laadt NA bouwsteenwinkel_rd01/assets/app.css en herdefinieert de
   design-tokens. De volledige rd01-lay-out neemt die kleuren daardoor
   automatisch over.

   RICHTING: het blauw van het merk blijft (logo, tekst-accent), maar de
   donkere vlakken zijn marineblauw in plaats van bijna-zwart, en het
   accent op vlakken is zon-geel. Dat geel resoneert met de sets zelf en
   haalt de kilte uit een pagina die zes donkere zones onder elkaar heeft.

   TOKEN-MAPPING (rd01 -> Azuur & zon):
     --navy      #1B2A4E -> #13263C     --navy-2   #243760 -> #1B3450
     --navy-3    #36487A -> #2A4763     --navy-deep#0F1A36 -> #0D1B2C
     --navy-ink  #0A1226 -> #0A1523
     --yellow    #FFB81C -> #FFC93C     --yellow-2 #F5AC0F -> #F2B824
     --yellow-soft#FFE9A8 -> #FFF1CC    (zon-geel = VLAKKEN/knoppen)
     --cream     #FFF8E1 -> #F1F6FA     --cream-2  #FBEFC4 -> #E6EFF5
     --cream-3   #F4E5B5 -> #D7E5EE     --off      #FBFAF7 -> #F8FBFD
     --text      #1B2A4E -> #13263C     --text-2   #4A5475 -> #3A4A5E
     --text-muted#6C7589 -> #5E6D80     --text-subtle#9098AB -> #8A98A8
     --gray-line #E5E7EB -> #DBE4EB     --gray-2   #EFEFF2 -> #EDF2F6
     --gray-3    #DCDFE5 -> #D4DEE6     --gray-soft#F5F5F7 -> #F2F6F9

   CONTRAST-REGEL: zon-geel #FFC93C is als TEKST op licht onleesbaar.
     - Yellow als VLAK (background/border/outline/highlight) -> #FFC93C
       met DONKERE tekst (via --navy/--text = #13263C). Dit regelt de
       token-override vanzelf.
     - Yellow als TEKST-ACCENT op LICHT -> AZUUR #0A6E92 (gerichte regels
       hieronder, via --accent-ink).
     - Yellow als tekst op DONKER (navy) -> blijft geel (leesbaar).
   ============================================================ */

:root {
  /* Color — Azuur & zon */
  --navy:        #13263C;
  --navy-2:      #1B3450;
  --navy-3:      #2A4763;
  --navy-deep:   #0D1B2C;
  --navy-ink:    #0A1523;

  --yellow:      #FFC93C;   /* zon-geel = vlakken/knoppen, met donkere tekst */
  --yellow-2:    #F2B824;
  --yellow-soft: #FFF1CC;

  --cream:       #F1F6FA;
  --cream-2:     #E6EFF5;
  --cream-3:     #D7E5EE;

  --white:       #FFFFFF;
  --off:         #F8FBFD;
  --gray-line:   #DBE4EB;
  --gray-2:      #EDF2F6;
  --gray-3:      #D4DEE6;
  --gray-soft:   #F2F6F9;

  --text:        #13263C;
  --text-2:      #3A4A5E;
  --text-muted:  #5E6D80;
  --text-subtle: #8A98A8;

  /* --success / --danger blijven semantisch ongewijzigd. */

  /* Azuur tekst-accent (yellow-op-licht vervanger). Het logo houdt zijn
     eigen diepblauw #217897; dit accent staat er los van. */
  --accent-ink:  #0A6E92;

  /* Shadows getint naar het marineblauw (19,38,60) i.p.v. rd01-navy. */
  --sh-1: 0 1px 0 rgba(19,38,60,0.04), 0 1px 2px rgba(19,38,60,0.04);
  --sh-2: 0 8px 20px -12px rgba(19,38,60,0.18);
  --sh-3: 0 24px 40px -20px rgba(19,38,60,0.25);
  --sh-deep: 0 32px 60px -28px rgba(13,27,44,0.5);
  --sh-lift: 0 4px 8px -2px rgba(19,38,60,0.08), 0 12px 28px -6px rgba(19,38,60,0.18);
}

/* ============================================================
   YELLOW-ALS-TEKST-OP-LICHT  ->  azuur #0A6E92 (--accent-ink)
   ============================================================ */

/* Logo-accent in de header (op wit). */
.logo-name .accent { color: var(--accent-ink); }

/* Trust-sterren in de trust-row (op licht). */
.t-stars { color: var(--accent-ink); }

/* Social-proof score-ster (op witte kaart) — was hardcoded #F7A823. */
.sp-badge-score .sp-star { color: var(--accent-ink); }

/* Social-proof reviewquote-sterren (op witte kaart) — was #F7A823. */
.sp-quote-stars { color: var(--accent-ink); }

/* ============================================================
   HARDCODED HEXES die de token-override niet raakt
   ============================================================ */

/* Statement-strip: highlight-woord staat op DONKER navy -> lichtblauw
   is hier prima leesbaar (was hardcoded oranje #F7A823). */
.statement-strip .statement-kreet .hl-y { color: var(--yellow); }

/* Footer accent-rand (was hardcoded oranje #F7A823). */
footer { border-top: 3px solid var(--yellow); }

/* Actieve periode-knop: hardcoded rd01-navy #14254C -> Snap-navy. Witte
   tekst blijft leesbaar op het diepe navy. */
.dur-opt.active { background: var(--navy); border-color: var(--navy); }

/* Toast: hardcoded rd01-navy #14254C -> Snap-navy (witte tekst). */
.rentm-toast { background: var(--navy); }

/* Modal-overlay: hertint naar --navy-deep. */
.rentm-overlay { background: rgba(13,27,44,0.55); }

/* ============================================================
   KNOP-CONTRAST — gele vlakken met leesbare tekst
   ============================================================ */

/* btn-yellow hover-glow op zon-geel. Tekst blijft donker
   (--navy = #13263C) op geel = leesbaar. */
.btn-yellow:hover { box-shadow: 0 8px 16px -8px rgba(255,201,60,0.55); }