/* ============================================================
   Soluna — Design tokens
   Zachte aardetinten, maanlicht, veel witruimte.
   Eén bron van waarheid voor kleur, ruimte, radius, type.
   ============================================================ */

:root {
  /* ---------- Kleur: warme basis ---------- */
  --sand-50:  #FCF9F5;   /* pagina-achtergrond */
  --sand-100: #F7F1E9;
  --sand-150: #F1E9DF;
  --sand-200: #E9DED1;
  --sand-300: #DCCDBC;

  --clay-300: #D3BBA6;
  --clay-400: #C0A288;
  --clay-500: #A8836A;

  /* ---------- Accenten ---------- */
  /* Eén accentkleur voor de hele app: terracotta. Alles wat interactief is
     gebruikt deze; niets anders draagt kleur om zichzelf te onderscheiden. */
  --terra-400: #C08668;  /* decoratief, nooit als tekst */
  --terra-500: #9E6144;  /* accent; als tekst 4,7:1 en met witte tekst 4,8:1 → AA */
  --terra-600: #8E5539;


  --olive-500: #6B7059;  /* alleen voor 'gereserveerd'-status */

  /* ---------- Goud ----------
     Geen tweede accent maar een LIJNKLEUR: de rand om de boog, de streepjes bij
     de maancyclus, de tekens die in lijn zijn getekend. Nooit als vulling en
     nooit als tekst op zand — daarvoor is hij te licht. De regel staat in
     docs/ONTWERP.md: één accent, en goud voor lijnen en tekens. */
  --goud:      #C4A059;
  --goud-2:    #E0C88E;  /* de haarlijn zelf; lichter, alleen als rand */
  --goud-tekst: #8A7038;  /* wel leesbaar op zand: 4,6:1 */


  /* ---------- Inkt / tekst ---------- */
  --ink-900: #2A2521;
  --ink-800: #3B342E;
  --ink-700: #4E453D;
  --ink-600: #665B51;
  --ink-500: #7E7268;
  --ink-400: #9A8F85;
  --ink-300: #B8AEA4;

  /* ---------- Semantisch ---------- */
  --bg:              var(--sand-50);
  --bg-elevated:     #FFFDFB;
  --bg-sunken:       var(--sand-100);
  --surface:         #FFFFFF;
  --surface-muted:   var(--sand-100);
  --text:            var(--ink-900);
  --text-secondary:  var(--ink-600);
  /* Bewust niet var(--ink-400): die is als tekstkleur te licht (3,0:1).
     #776B61 haalt 4,9:1 op de pagina en 4,6:1 op de gedempte vlakken → AA,
     ook voor de kleine kapitalen van 11 px. --ink-400 blijft voor decoratie. */
  --text-tertiary:   #776B61;
  --text-on-accent:  #FFFCF8;
  --accent:          var(--terra-500);
  --accent-soft:     var(--terra-400);
  --accent-wash:     #F4E7DE;
  --border:          rgba(42, 37, 33, 0.09);
  --border-strong:   rgba(42, 37, 33, 0.16);
  --hairline:        rgba(42, 37, 33, 0.07);
  --overlay:         rgba(30, 26, 22, 0.42);
  --nav-bg:          rgba(252, 249, 245, 0.82);

  /* ---------- Elementkleuren ----------
     Staan bewust NIET hier. De vijf paletten leven in content/elements.js en
     worden alleen gebruikt voor de generatieve artwork en de element-hero's.
     Ze horen niet in de interface: vijf uitgesproken kleuren naast elkaar
     maakten de bibliotheek kleurrijk in plaats van rustig. */


  /* ---------- Ruimte (4pt-raster) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-7: 32px;  --sp-8: 40px;
  --sp-9: 48px;  --sp-10: 64px; --sp-11: 80px;

  /* Horizontale pagina-marge */
  --gutter: 22px;

  /* ---------- Radius: organisch, ruim ---------- */
  --r-xs: 8px;   --r-sm: 12px;  --r-md: 18px;
  --r-lg: 24px;  --r-xl: 32px;  --r-2xl: 40px;
  --r-pill: 999px;

  /* ---------- Schaduw: zacht, warm, nooit hard ---------- */
  --sh-xs: 0 1px 2px rgba(74, 58, 44, 0.05);
  --sh-sm: 0 2px 10px rgba(74, 58, 44, 0.06);
  --sh-md: 0 8px 26px -8px rgba(74, 58, 44, 0.14);
  --sh-lg: 0 20px 50px -18px rgba(74, 58, 44, 0.22);
  --sh-nav: 0 -1px 0 rgba(42, 37, 33, 0.06);

  /* ---------- Typografie ---------- */
  --font-display: "Cormorant Garamond", ui-serif, "New York", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

  --fs-display-xl: 44px;
  --fs-display-lg: 36px;
  --fs-display-md: 28px;
  --fs-display-sm: 23px;
  --fs-body-lg: 17px;
  --fs-body: 15.5px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;
  --fs-micro: 11px;

  --lh-tight: 1.14;
  --lh-snug: 1.32;
  --lh-body: 1.62;

  --tracking-word: 0.3em;   /* wordmark SOLUNA */
  --tracking-label: 0.14em; /* kleine kapitalen */

  /* ---------- Beweging: rustig, subtiel ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* ---------- Layout ---------- */
  --app-max: 460px;          /* telefoonkolom, ook op desktop */
  --nav-h: 62px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Ruimte onderaan elke pagina zodat de bottom-nav nooit content bedekt */
  --content-bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--sp-8));

  --z-nav: 40;
  --z-header: 30;
  --z-sheet: 60;
  --z-toast: 80;
}

/* ============================================================
   Donkere modus — avondsessies. Zelfde warmte, minder licht.
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:             #1A1714;
    --bg-elevated:    #221E1A;
    --bg-sunken:      #151210;
    --surface:        #24201C;
    --surface-muted:  #2B2621;
    --text:           #F2EBE3;
    --text-secondary: #C4B8AC;
    --text-tertiary:  #9A8F84;
    --text-on-accent: #1A1714;
    --accent:         #D79A78;
    --accent-soft:    #C58763;
    --accent-wash:    #33291F;
    --border:         rgba(242, 235, 227, 0.11);
    --border-strong:  rgba(242, 235, 227, 0.2);
    --hairline:       rgba(242, 235, 227, 0.08);
    --overlay:        rgba(10, 8, 7, 0.6);
    --nav-bg:         rgba(26, 23, 20, 0.86);
    --sh-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --sh-md: 0 8px 26px -8px rgba(0, 0, 0, 0.5);
    --sh-lg: 0 20px 50px -18px rgba(0, 0, 0, 0.6);
  }
}