/*
  Tuindagboek, ontwerptokens
  Bron en uitleg: docs/ontwerp.md
  Licht is de standaard. Donker volgt het systeem (prefers-color-scheme),
  tenzij de gebruiker in Mijn tuin zelf kiest: <html data-theme="light|dark">.
  De donkere waarden staan daarom twee keer in dit bestand (systeem en handmatig);
  wijzig ze altijd op beide plekken. Contrastcontrole: tools/dev/contrast.mjs.

  Typeschaal in rem, uitgaand van een root van 17 px (iOS "body").
  Ruimte, hoeken en maten in px: die schalen niet mee met Dynamic Type.
*/

:root {
  color-scheme: light;

  /* ---------- Vlakken ---------- */
  --color-bg: #f7faf5;            /* pagina, licht groenwit */
  --color-surface: #ffffff;       /* lijsten, kaarten, bladen */
  --color-surface-2: #eef4ea;     /* segmentbalk, invoervelden, inzetvlakken */
  --color-surface-3: #e2ebdc;     /* ingedrukt, sleepgreep, schijfjes */
  --color-material: rgba(250, 252, 248, 0.94); /* tabbalk en navigatiebalk, met blur */
  --color-scrim: rgba(13, 26, 17, 0.32);       /* achter een blad */

  /* ---------- Tekst ---------- */
  --color-text: #15291b;          /* titels, gewasnamen */
  --color-text-2: #4a5d4f;        /* uitleg, datumvensters, afgevinkte titels */
  --color-text-3: #5f7163;        /* bijschriften, tabbalk-labels, placeholders */

  /* ---------- Lijnen en bediening ---------- */
  --color-line: #e1e9dc;          /* scheidingslijnen (decoratief) */
  --color-control: #6c8a71;       /* rand van open afvinkrondje, schakelaar uit, invoerrand */
  --color-focus: #2c7a31;

  /* ---------- Accent: blad ---------- */
  --color-accent: #2c7a31;        /* primaire knop, actieve tab, gevuld afvinkrondje */
  --color-on-accent: #ffffff;
  --color-accent-soft: #e3f3d7;   /* waas over een afgevinkte rij */
  --color-accent-pressed: #23642a;
  --color-accent-on-print: #23642a; /* accent als tekst op een drukvlak (--print-*), zoals Kasplan op de kas */

  /* ---------- Statussen (altijd met icoon en woord, nooit alleen kleur) ---------- */
  --color-new-bg: #e0f2d0;
  --color-new-fg: #23601b;        /* Nieuw: spruitje */
  --color-run-bg: #ddedf9;
  --color-run-fg: #1b5586;        /* Loopt: halve cirkel */
  --color-last-bg: #ffe3d0;
  --color-last-fg: #9a3809;       /* Laatste kans: zandloper, stempel */
  --color-last-line: #d4581a;     /* kantlijn links van een urgente rij */
  --color-harvest-bg: #f9e0ea;
  --color-harvest-fg: #8c2550;    /* Oogsten: mandje */
  --color-done-fg: #2c7a31;       /* Gedaan: vinkje met spruit */

  /* ---------- Signalen ---------- */
  --color-danger: #b42318;        /* verwijderen, fouten */
  --color-danger-bg: #fde4e1;
  --color-frost: #22598a;         /* vorstregel, sneeuwvlok */
  --color-offline-bg: #fff3c4;
  --color-offline-fg: #6b4e00;

  /* ---------- Mensen (de twee tuinleden, initialen in een rondje) ---------- */
  --color-person-a: #2c7a31;
  --color-person-b: #6a3fa0;
  --color-on-person: #ffffff;

  /* ---------- Zaadzakje (Zaden, achterkant-blad) ---------- */
  --color-kraft: #e3d3b4;
  --color-kraft-edge: #b99f74;
  --color-kraft-text: #2e2418;
  --color-kraft-text-2: #5a4630;

  /* ---------- Drukvlakken: tegels achter illustraties, voorkant zakje ---------- */
  --print-lucht: #d4eaf5;
  --print-lila: #e6dcf2;
  --print-geel: #f6e7ac;
  --print-munt: #cfecd9;
  --print-biet: #f5d7de;
  --print-aarde: #efdcc8;
  --print-dots: rgba(21, 41, 27, 0.10); /* fijn stippelraster op drukvlakken */

  /* ---------- Kalenderbalken (seizoensbalk) ---------- */
  --cal-binnen: #7f52b8;          /* binnen zaaien */
  --cal-buiten: #3a8540;          /* buiten zaaien */
  --cal-planten: #9a6a12;         /* planten of poten */
  --cal-oogst: #b23c6c;           /* oogsten */
  --cal-track: #e7eee3;
  --cal-today: #15291b;
  --cal-frost: #22598a;

  /* ---------- Scène: groeistrook, inlogscherm, lege staten ---------- */
  --scene-sky-1: #d6edf5;
  --scene-sky-2: #eaf6e6;
  --scene-sun: #ffd45a;
  --scene-hill: #c9e6b4;
  --scene-hill-2: #b3db98;
  --scene-soil: #7a5138;
  --scene-soil-deep: #573823;
  --scene-compost: #3f2a1c;
  --scene-crumb: #9a7054;
  --scene-on-soil: #fff4e8;       /* tekst op de grondlaag */

  /* ---------- Illustratiepalet (vast in beide thema's: het is drukwerk) ---------- */
  --illu-ink: #24352a;            /* contourlijn, 2 eenheden op viewBox 64 */
  --illu-leaf: #6aad57;
  --illu-leaf-dark: #4f8f3c;
  --illu-fresh: #8fd05a;
  --illu-stem: #4f9a3c;
  --illu-kale: #3f6f4a;
  --illu-leek: #e9efd6;
  --illu-garlic: #f6f1e7;
  --illu-onion: #d18f40;
  --illu-onion-light: #e8b66c;
  --illu-carrot: #e8792b;
  --illu-beet: #a3324f;
  --illu-purple: #9c6fb0;
  --illu-red: #d9452f;
  --illu-yellow: #f2c84b;
  --illu-squash: #e59a2e;
  --illu-soil: #7a5138;
  --illu-compost: #3f2a1c;
  --illu-wood: #a87b4f;
  --illu-steel: #9aa8b1;
  --illu-water: #4b8fc6;
  --illu-glass: #cfe6f3;
  --illu-fleece: #f4f6f2;
  --illu-blue: #5f87ea;           /* korenbloem, komkommerkruid */
  --illu-pink: #ec9ac0;           /* cosmos, klaver, oregano, vijgvlees */
  --illu-magenta: #c43a86;        /* zinnia, malope */
  --illu-sage: #8daaa0;           /* grijsgroen blad: korenbloem, lavendel, zeekool */
  /* Schaduwplaat: inkt in overdruk op ongeveer een kwart dekking. Ligt altijd op een
     illustratiekleur, en die is in beide thema's gelijk, dus ook deze waarde. */
  --illu-shade: rgba(28, 44, 32, 0.24);
  /* Onderdruk: een lichte plaat onder de hele tekening, iets breder dan de inktlijn (zoals wit
     onder kleur op donker papier). In licht thema niet nodig; in donker houdt hij het silhouet
     los van de donkere tegel, waar de inktlijn anders in wegvalt. */
  --illu-halo: transparent;

  /* ---------- Lettertypes (zelf gehost, zie docs/ontwerp.md) ---------- */
  --font-display: 'Gabarito', 'Avenir Next', system-ui, sans-serif;
  --font-text: 'Figtree', -apple-system, system-ui, sans-serif;

  /* ---------- Typeschaal (rem bij root 17 px; px tussen haakjes) ---------- */
  --text-hero: 2.8235rem;         /* 48: het getal in de groeistrook */
  --text-largetitle: 2rem;        /* 34: grote titel */
  --text-title-1: 1.6471rem;      /* 28: titel in een blad */
  --text-title-2: 1.2941rem;      /* 22: sectiekop */
  --text-title-3: 1.1765rem;      /* 20: gewasnaam op zakje */
  --text-headline: 1rem;          /* 17: rijtitel, vet */
  --text-body: 1rem;              /* 17 */
  --text-callout: 0.9412rem;      /* 16 */
  --text-subhead: 0.8824rem;      /* 15: weekregel, uitleg */
  --text-footnote: 0.7647rem;     /* 13: meta, groepkop */
  --text-caption: 0.7059rem;      /* 12: statuslabel */
  --text-caption-2: 0.6471rem;    /* 11: tabbalk */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-body: 1.4;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heavy: 800;

  --tracking-display: -0.02em;
  --tracking-stamp: 0.06em;

  /* ---------- Ruimte (4-puntsraster) ---------- */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --gutter: 16px;
  --content-max: 560px;

  /* ---------- Hoeken ---------- */
  --radius-xs: 6px;               /* stempel, kleine badge */
  --radius-sm: 10px;              /* invoerveld, segment binnenin */
  --radius-md: 16px;              /* tegel, knop, maatvakje */
  --radius-lg: 22px;              /* lijstgroep, kaart, zakje */
  --radius-xl: 28px;              /* groeistrook, bovenkant blad */
  --radius-pill: 999px;           /* statuslabel, teller, chip */

  /* ---------- Maten ---------- */
  --size-tap: 44px;               /* minimum tikdoel */
  --size-check: 52px;             /* afvinkrondje */
  --size-tile: 52px;              /* illustratietegel in een rij */
  --size-row: 72px;               /* minimumhoogte taakrij */
  --size-navbar: 44px;
  --size-tabbar: 49px;
  --size-icon: 24px;
  --size-icon-sm: 16px;
  --size-avatar: 24px;
  --stroke-illu: 2;               /* in viewBox-eenheden, viewBox 64 */
  --stroke-icon: 1.75;            /* in px bij 24 px, UI-iconen */

  /* ---------- Veilige zones ---------- */
  --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);

  /* ---------- Schaduw en materiaal ---------- */
  --shadow-card: 0 1px 2px rgba(31, 60, 35, 0.06), 0 8px 24px -12px rgba(31, 60, 35, 0.18);
  --shadow-raised: 0 2px 6px rgba(31, 60, 35, 0.10), 0 12px 28px -10px rgba(31, 60, 35, 0.24);
  --shadow-sheet: 0 -8px 40px rgba(13, 26, 17, 0.18);
  --shadow-segment: 0 1px 3px rgba(0, 0, 0, 0.12);
  --blur-material: saturate(1.6) blur(20px);

  /* ---------- Beweging ---------- */
  --duration-instant: 100ms;
  --duration-fast: 160ms;
  --duration-base: 250ms;
  --duration-slow: 420ms;
  --duration-grow: 700ms;
  --duration-ring: 600ms;         /* uitdijende kring na afvinken */
  --delay-check: 120ms;           /* vinkje tekent na het vullen */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.3, 0.9, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Donker, volgens het systeem ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --color-bg: #0d1511;
    --color-surface: #16211b;
    --color-surface-2: #1b2921;
    --color-surface-3: #24352b;
    --color-material: rgba(19, 28, 23, 0.94);
    --color-scrim: rgba(0, 0, 0, 0.5);

    --color-text: #e8f1e6;
    --color-text-2: #b0c2b2;
    --color-text-3: #98ab9b;

    --color-line: #26362c;
    --color-control: #7f9b84;
    --color-focus: #86d478;

    --color-accent: #86d478;
    --color-on-accent: #0e2410;
    --color-accent-soft: #1d3a1f;
    --color-accent-pressed: #a2e296;
    --color-accent-on-print: #86d478;

    --color-new-bg: #1c3a1b;
    --color-new-fg: #b3e89f;
    --color-run-bg: #132f48;
    --color-run-fg: #a8d3f8;
    --color-last-bg: #47220b;
    --color-last-fg: #ffb990;
    --color-last-line: #ff8a4c;
    --color-harvest-bg: #45172b;
    --color-harvest-fg: #f7b3cf;
    --color-done-fg: #86d478;

    --color-danger: #ff8a80;
    --color-danger-bg: #3f1a17;
    --color-frost: #9ccbf2;
    --color-offline-bg: #3a3010;
    --color-offline-fg: #f5dc8a;

    --color-person-a: #86d478;
    --color-person-b: #c9a8f0;
    --color-on-person: #0e1a12;

    --color-kraft: #3b3125;
    --color-kraft-edge: #6b5a42;
    --color-kraft-text: #f3e8d4;
    --color-kraft-text-2: #cdbb9d;

    --print-lucht: #1d3644;
    --print-lila: #2e2640;
    --print-geel: #3b3418;
    --print-munt: #1b3a2a;
    --illu-halo: #e4ebdc;
    --print-biet: #3d1f29;
    --print-aarde: #3a2a1d;
    --print-dots: rgba(232, 241, 230, 0.08);

    --cal-binnen: #b99be6;
    --cal-buiten: #7cc87a;
    --cal-planten: #e0b04f;
    --cal-oogst: #ec8fb0;
    --cal-track: #22322a;
    --cal-today: #e8f1e6;
    --cal-frost: #9ccbf2;

    --scene-sky-1: #102338;
    --scene-sky-2: #17322a;
    --scene-sun: #f3ecc8;
    --scene-hill: #173326;
    --scene-hill-2: #1d3d2c;
    --scene-soil: #5a3b29;
    --scene-soil-deep: #432b1d;
    --scene-compost: #2c1c12;
    --scene-crumb: #7a5640;
    --scene-on-soil: #fff1e2;

    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
    --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 32px -12px rgba(0, 0, 0, 0.7);
    --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.5);
    --shadow-segment: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

/* ---------- Donker, handmatig gekozen (zelfde waarden als hierboven) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0d1511;
  --color-surface: #16211b;
  --color-surface-2: #1b2921;
  --color-surface-3: #24352b;
  --color-material: rgba(19, 28, 23, 0.94);
  --color-scrim: rgba(0, 0, 0, 0.5);

  --color-text: #e8f1e6;
  --color-text-2: #b0c2b2;
  --color-text-3: #98ab9b;

  --color-line: #26362c;
  --color-control: #7f9b84;
  --color-focus: #86d478;

  --color-accent: #86d478;
  --color-on-accent: #0e2410;
  --color-accent-soft: #1d3a1f;
  --color-accent-pressed: #a2e296;
  --color-accent-on-print: #86d478;

  --color-new-bg: #1c3a1b;
  --color-new-fg: #b3e89f;
  --color-run-bg: #132f48;
  --color-run-fg: #a8d3f8;
  --color-last-bg: #47220b;
  --color-last-fg: #ffb990;
  --color-last-line: #ff8a4c;
  --color-harvest-bg: #45172b;
  --color-harvest-fg: #f7b3cf;
  --color-done-fg: #86d478;

  --color-danger: #ff8a80;
  --color-danger-bg: #3f1a17;
  --color-frost: #9ccbf2;
  --color-offline-bg: #3a3010;
  --color-offline-fg: #f5dc8a;

  --color-person-a: #86d478;
  --color-person-b: #c9a8f0;
  --color-on-person: #0e1a12;

  --color-kraft: #3b3125;
  --color-kraft-edge: #6b5a42;
  --color-kraft-text: #f3e8d4;
  --color-kraft-text-2: #cdbb9d;

  --print-lucht: #1d3644;
  --print-lila: #2e2640;
  --print-geel: #3b3418;
  --print-munt: #1b3a2a;
  --illu-halo: #e4ebdc;
  --print-biet: #3d1f29;
  --print-aarde: #3a2a1d;
  --print-dots: rgba(232, 241, 230, 0.08);

  --cal-binnen: #b99be6;
  --cal-buiten: #7cc87a;
  --cal-planten: #e0b04f;
  --cal-oogst: #ec8fb0;
  --cal-track: #22322a;
  --cal-today: #e8f1e6;
  --cal-frost: #9ccbf2;

  --scene-sky-1: #102338;
  --scene-sky-2: #17322a;
  --scene-sun: #f3ecc8;
  --scene-hill: #173326;
  --scene-hill-2: #1d3d2c;
  --scene-soil: #5a3b29;
  --scene-soil-deep: #432b1d;
  --scene-compost: #2c1c12;
  --scene-crumb: #7a5640;
  --scene-on-soil: #fff1e2;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
  --shadow-raised: 0 2px 6px rgba(0, 0, 0, 0.35), 0 14px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-sheet: 0 -8px 40px rgba(0, 0, 0, 0.5);
  --shadow-segment: 0 1px 3px rgba(0, 0, 0, 0.4);
}

:root[data-theme="light"] {
  color-scheme: light;
}

/* ---------- Minder beweging: alle duur-tokens naar vrijwel nul ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-grow: 1ms;
    --duration-ring: 1ms;
    --delay-check: 0ms;
    --ease-spring: linear;
  }
}