/* PicUppy — designtokens
   Huisstijl: clean, minimalistisch, beige/nootachtig met diepgroen en koraal.
   Afgeleid van de tien referentieschermen. Eén bron voor kleur, ruimte en vorm. */

:root {
  /* ---- Ondergrond en papier ---- */
  --sand-50:  #FCF9F3;   /* lichtste vlak, sidebar */
  --sand-100: #F7F1E7;   /* app-canvas */
  --sand-200: #F1E9DB;   /* secties, hover */
  --sand-300: #E7DCC9;   /* randen op zand */
  --sand-400: #D9CBB4;   /* subtiele lijn */
  --paper:    #FFFFFF;   /* kaarten */

  /* ---- Diepgroen: de hoofdactie ---- */
  --pine-900: #26332A;
  --pine-800: #2E3D31;
  --pine-700: #3A4A3C;   /* primaire knop, actieve nav */
  --pine-600: #47593F;
  --pine-500: #5B6E52;
  --pine-200: #B9C4B4;
  --pine-050: #E7ECE4;

  /* ---- Koraal: accent, nooit een hoofdactie ---- */
  --coral-600: #D46A46;
  --coral-500: #E8825F;  /* logo-mark, markers, badges */
  --coral-200: #F6CDBC;
  --coral-050: #FDF0EA;

  /* ---- Lavendel: zachte tweede actie (Redeem, Claim, Start Route) ---- */
  --lav-500: #9B8FC7;
  --lav-200: #DDD6F0;
  --lav-100: #EDE9F7;

  /* ---- Lucht: informatie, coupons, weer ---- */
  --sky-600: #2F6FB0;
  --sky-500: #4A8DD0;
  --sky-100: #DEEBF8;
  --sky-050: #EEF5FC;

  /* ---- Tekst ---- */
  --ink:      #16181A;
  --ink-2:    #3D4247;
  --ink-3:    #6B7176;   /* toelichting */
  --ink-4:    #9AA0A5;   /* metadata */
  --on-dark:  #F7F4EE;

  /* ---- Status ---- */
  --ok:    #2F7D53;
  --ok-bg: #E4F1E9;
  --warn:  #B7791F;
  --warn-bg:#FBF0DA;
  --err:   #C0453B;
  --err-bg:#FAE7E5;

  /* ---- Kaartkleuren (zelfgetekende OSM-stijl) ---- */
  --map-land:   #F2EFE7;
  --map-green:  #CFE3C2;
  --map-water:  #A9CCE3;
  --map-road:   #FFFFFF;
  --map-road-2: #F6D9A0;
  --map-rail:   #C9C4BC;
  --map-line:   #E0DBD1;
  --map-route:  #E8825F;

  /* ---- Typografie ----
     Systeemstapel die de geometrische schreefloze uit de ontwerpen benadert.
     Wil je exact Outfit/Poppins: zet de webfont in assets/fonts en vul
     --font-display aan; de CSP staat font-src 'self' toe. */
  --font-display: 'Outfit', 'Avenir Next', 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body:    'Outfit', 'Avenir Next', 'Nunito Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-hero:  clamp(2.4rem, 6.2vw, 4.1rem);
  --fs-h1:    clamp(1.9rem, 4.2vw, 2.9rem);
  --fs-h2:    clamp(1.35rem, 2.6vw, 1.8rem);
  --fs-h3:    1.16rem;
  --fs-body:  1rem;
  --fs-sm:    .9rem;
  --fs-xs:    .8rem;
  --fs-2xs:   .72rem;

  --lh-tight: 1.06;
  --lh-head:  1.18;
  --lh-body:  1.6;

  /* ---- Ruimte: 4px-raster ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
  --s-9: 56px; --s-10: 72px; --s-11: 96px;

  /* ---- Vorm ---- */
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---- Diepte: zacht, nooit zwaar ---- */
  --sh-1: 0 1px 2px rgba(22,24,26,.05);
  --sh-2: 0 2px 10px rgba(22,24,26,.06);
  --sh-3: 0 8px 26px rgba(22,24,26,.08);
  --sh-4: 0 18px 48px rgba(22,24,26,.12);

  /* ---- Beweging ---- */
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* ---- Maatvoering ---- */
  --page: 1240px;
  --rail: 268px;   /* zijbalk op desktop */
  --rail-sm: 76px; /* ingeklapte zijbalk */
  --header-h: 64px;
  --tabbar-h: 66px;
}

/* De schermen zijn licht ontworpen. Donkere modus houdt dezelfde verhoudingen
   aan: zand wordt aarde, papier wordt steen, groen blijft de hoofdactie. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --sand-50:  #1B1D1A;
    --sand-100: #161814;
    --sand-200: #22251F;
    --sand-300: #2E322A;
    --sand-400: #3A3F35;
    --paper:    #1F221D;
    --ink:      #F2EEE6;
    --ink-2:    #DAD5CA;
    --ink-3:    #A6A196;
    --ink-4:    #7C776D;
    --pine-050: #26332A;
    --pine-200: #4C5C48;
    --map-land: #23261F;
    --map-green:#2C3A28;
    --map-water:#1E3243;
    --map-road: #33372E;
    --map-line: #2B2E26;
    --sh-1: 0 1px 2px rgba(0,0,0,.4);
    --sh-2: 0 2px 10px rgba(0,0,0,.45);
    --sh-3: 0 8px 26px rgba(0,0,0,.5);
    --sh-4: 0 18px 48px rgba(0,0,0,.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; }
}