/* Lief Dagboek — designsysteem (zie design/systeem.md). Alleen tokens gebruiken. */
:root {
  --bg: #0F1424; --opp: #171D33; --verh: #1F2742; --lijn: #2A3354; --lijn-2: #374268;
  --tekst: #F1E8D8; --tekst-2: #C9C1B2; --tekst-3: #A9A79F;
  --acc: #F2907A; --acc-sterk: #F7A792; --acc-zacht: #3A2430; --op-acc: #2A1418;
  --groen: #8FB89A; --groen-zacht: #1F3328; --geel: #E8B86B; --geel-zacht: #3A2F1C; --rood: #E87A7A; --rood-zacht: #3D1E24;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px; --s9: 64px;
  --r-bel: 20px; --r-kaart: 20px; --r-in: 14px; --r-chip: 999px;
  --t-xs: 12px; --t-s: 13px; --t-m: 15px; --t-b: 17px; --t-l: 19px; --t-xl: 24px; --t-2xl: 30px; --t-3xl: 40px;
  --ease: cubic-bezier(.22,.8,.3,1); --snel: 160ms; --mid: 260ms;
  --schaduw: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px -18px rgba(0,0,0,.6);
  --tab-h: 64px;
  color-scheme: dark;
}
:root[data-theme="licht"] {
  --bg: #F7F0E4; --opp: #FFFBF3; --verh: #EFE5D3; --lijn: #DDD0BA; --lijn-2: #CBBBA0;
  --tekst: #1B2236; --tekst-2: #3A4052; --tekst-3: #5E6070;
  --acc: #C2503E; --acc-sterk: #A8402F; --acc-zacht: #F6DDD3; --op-acc: #FFFBF3;
  --groen: #3F7A55; --groen-zacht: #DCEBDF; --geel: #9A6A12; --geel-zacht: #F5E6C8; --rood: #B23A3A; --rood-zacht: #F6D9D6;
  --schaduw: 0 1px 0 #DDD0BA, 0 8px 24px -12px rgba(27,34,54,.25);
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--tekst); font-family: var(--sans); font-size: var(--t-b); line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; text-rendering: optimizeLegibility;
}
body::before { /* korrel */
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; margin: 0; line-height: 1.15; font-optical-sizing: auto; }
p { margin: 0; }
a { color: var(--acc); text-decoration: none; }
button { font: inherit; color: inherit; }
.serif { font-family: var(--serif); }
.gedempt { color: var(--tekst-3); }
.klein { font-size: var(--t-s); }
.label { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--tekst-3); font-weight: 600; }
.verborgen { display: none !important; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 6px; }

/* knoppen */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s6);
  border-radius: var(--r-chip); border: 1px solid var(--lijn-2); background: transparent; cursor: pointer; font-weight: 600; font-size: var(--t-m);
  transition: background var(--snel) var(--ease), transform var(--snel) var(--ease), border-color var(--snel); }
.knop:hover { background: var(--verh); }
.knop:active { transform: scale(.98); }
.knop-hoofd { background: var(--acc); border-color: var(--acc); color: var(--op-acc); }
.knop-hoofd:hover { background: var(--acc-sterk); }
.knop-stil { border-color: transparent; color: var(--tekst-2); }
.knop-klein { min-height: 36px; padding: 0 var(--s4); font-size: var(--t-s); }
.knop-breed { width: 100%; }
.knop[disabled] { opacity: .45; pointer-events: none; }
.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* invoer */
.veld { display: flex; flex-direction: column; gap: var(--s2); }
.veld label { font-size: var(--t-s); color: var(--tekst-2); font-weight: 500; }
.invoer { width: 100%; min-height: 52px; padding: var(--s3) var(--s4); border-radius: var(--r-in); border: 1px solid var(--lijn); background: var(--opp);
  color: var(--tekst); font: inherit; font-size: var(--t-b); transition: border-color var(--snel); }
.invoer:focus { outline: none; border-color: var(--acc); }
.invoer::placeholder { color: var(--tekst-3); }
.keuzes { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { min-height: 44px; padding: 0 var(--s5); border-radius: var(--r-chip); border: 1px solid var(--lijn); background: var(--opp); cursor: pointer;
  display: inline-flex; align-items: center; font-size: var(--t-m); transition: all var(--snel) var(--ease); }
.chip[aria-pressed="true"] { border-color: var(--acc); background: var(--acc-zacht); color: var(--tekst); }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--r-chip); font-size: var(--t-s); background: var(--verh); color: var(--tekst-2); white-space: nowrap; }
.tag-acc { background: var(--acc-zacht); color: var(--acc); }
.tag-groen { background: var(--groen-zacht); color: var(--groen); }
.tag-geel { background: var(--geel-zacht); color: var(--geel); }
.tag-rood { background: var(--rood-zacht); color: var(--rood); }
.punt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: none; }
.vink { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border: 1px solid var(--lijn); border-radius: var(--r-in); background: var(--opp); cursor: pointer; }
.vink input { width: 22px; height: 22px; accent-color: var(--acc); margin: 2px 0 0; flex: none; }
.vink b { font-weight: 600; display: block; margin-bottom: 2px; }

/* kaarten */
.kaart { background: var(--opp); border: 1px solid var(--lijn); border-radius: var(--r-kaart); padding: var(--s5); }
.citaat { font-family: var(--serif); font-style: italic; color: var(--tekst-2); border-left: 2px solid var(--acc); padding-left: var(--s3); font-size: var(--t-m); }
.balk { height: 6px; border-radius: 99px; background: var(--verh); overflow: hidden; }
.balk > i { display: block; height: 100%; background: var(--acc); border-radius: 99px; transition: width 800ms var(--ease); }

/* laden */
.adem { display: inline-flex; gap: 6px; align-items: center; }
.adem i { width: 7px; height: 7px; border-radius: 50%; background: var(--acc); animation: adem 1.4s infinite var(--ease); }
.adem i:nth-child(2) { animation-delay: .2s; } .adem i:nth-child(3) { animation-delay: .4s; }
@keyframes adem { 0%, 100% { opacity: .3; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@keyframes op { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.op { animation: op var(--mid) var(--ease) both; }
.skelet { background: linear-gradient(90deg, var(--opp), var(--verh), var(--opp)); background-size: 200% 100%; animation: skel 1.4s infinite linear; border-radius: 10px; }
@keyframes skel { to { background-position: -200% 0; } }

/* melding */
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + 24px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--verh); border: 1px solid var(--lijn-2);
  padding: var(--s3) var(--s5); border-radius: var(--r-chip); font-size: var(--t-m); z-index: 50; box-shadow: var(--schaduw); animation: op var(--mid) var(--ease); max-width: calc(100% - 32px); }

/* logo */
.logo { display: inline-flex; align-items: center; gap: var(--s3); font-family: var(--serif); font-size: var(--t-l); }
.logo svg { width: 30px; height: 30px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }