/* Flyingcloud design system (16 okt 2026). Kleuren uit het kleurenschema van
   Lars: wit #FFFFFF, beige #F0EAE1, zwart #171717, babyblauw #DCECF7 en
   off-white #FAF8F5. Het blauw van het wolkje in het logo (#7FAAD6) is het
   enige accent dat donkerder is dan babyblauw. De tokennamen zijn geërfd van de
   Nestell-basis (terracotta = de actiekleur, plum = de merkkleur); de waarden
   zijn van Flyingcloud. Nooit kleur, maat of letter hard in een component zetten. */
:root {
  /* --- Palet uit het kleurenschema --- */
  --fc-white:     #FFFFFF;
  --fc-beige:     #F0EAE1;
  --fc-black:     #171717;
  --fc-baby:      #DCECF7;
  --fc-offwhite:  #FAF8F5;
  --fc-cloud:     #7FAAD6;  /* blauw van het wolkje in het logo */

  /* --- Rollen (namen geërfd van Nestell) --- */
  --terracotta:        #171717;  /* actiekleur: koopknoppen zwart met witte tekst */
  --terracotta-strong: #000000;
  --terracotta-soft:   #DCECF7;
  --terracotta-wash:   #EEF5FB;

  --plum:        #171717;  /* koppen, footer-tekst */
  --plum-soft:   #4F7DAF;  /* links en kleine accenten, 4,6:1 op wit */
  --plum-wash:   #F0EAE1;

  --cream:       #FFFFFF;
  --cream-deep:  #FAF8F5;  /* sectie-achtergrond: off-white */
  --surface:     #FFFFFF;
  --ink:         #171717;
  --muted:       #6B6762;  /* secundaire tekst, 5,6:1 op wit */
  --line:        #E8E2D8;

  --sage:        #4F7A4A;  /* voorraad, "gelukt" */
  --gold:        #DCECF7;

  --sale:        #B3261E;
  --promo:        #DCECF7;
  --promo-strong: #7FAAD6;
  --promo-ink:    #171717;

  --bg: var(--cream);
  --primary: var(--terracotta);
  --primary-strong: var(--terracotta-strong);
  --secondary: var(--plum);

  /* --- Typografie ---
     Koppen in Cormorant Garamond (dun en chic, zoals in het ontwerp), tekst,
     menu en de gespatieerde hoofdletterlabels in Jost. Beide zelf gehost. */
  --font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --font-body: "Jost", "Segoe UI", system-ui, -apple-system, sans-serif;
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.75rem;
  --step-3: clamp(2rem, 6vw, 2.75rem);
  --step-4: clamp(2.6rem, 6.5vw, 4.4rem);
  --track: .16em;   /* letterspatiëring van de hoofdletterlabels */

  /* --- Ruimte en vorm: strak, bijna rechte hoeken, knoppen als pil --- */
  --space: 8px;
  --radius-sm: 2px;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  --blob-1: 50%;
  --blob-2: 6px;
  --leaf: 6px;

  --line-h: 1px solid var(--line);
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --icon-inset: 4px;
  --shadow-sm: 0 4px 14px -8px rgba(23, 23, 23, .18);
  --shadow: 0 16px 36px -24px rgba(23, 23, 23, .30);
  --shadow-lift: 0 24px 50px -26px rgba(23, 23, 23, .35);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-xs: .1s;
  --dur-sm: .14s;
  --dur-md: .18s;
  --dur-lg: .26s;
  --dur-page: .16s;
}