/*
 * Jaarnota – gedeelde huisstijl (richting C: warm & persoonlijk)
 * Gebruikt door jaarnota.nl én app.jaarnota.nl.
 * Bewust één licht thema: rustig, betrouwbaar, geen donkere modus.
 */
:root {
  /* Kleuren */
  --petrol: #0B3B4A;          /* hoofdkleur: tekst, vlakken, vertrouwen */
  --petrol-2: #0E4457;
  --petrol-zacht: #DCEBEF;    /* zachte vlakken */
  --petrol-lijn: #D3E2E6;
  --grond: #F3F7F8;           /* achtergrond */
  --wit: #FFFFFF;
  --tekst: #0B3B4A;
  --tekst-2: #36606C;         /* gedempte tekst */
  --tekst-3: #4E717B;         /* labels, bijschriften */
  --koraal: #C8432B;          /* acties: knoppen met witte tekst (contrast 4,9:1) */
  --koraal-donker: #A9361F;
  --koraal-fel: #E8553A;      /* alleen decoratief */
  --koraal-zacht: #FFF1EC;

  /* Statuskleuren (los van het accent) */
  --groen: #1F7A4D;  --groen-zacht: #E5F4EC;
  --oranje: #A35A00; --oranje-zacht: #FFF4DE;
  --rood: #B42318;   --rood-zacht: #FDECEA;
  --blauw: #1D4E89;  --blauw-zacht: #E8F0FA;

  /* Typografie */
  --kop: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif;
  --basis: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Vorm */
  --radius: 22px;
  --radius-m: 16px;
  --radius-s: 11px;
  --pil: 999px;
  --schaduw: 0 14px 40px rgba(11, 59, 74, 0.10);
  --schaduw-s: 0 2px 10px rgba(11, 59, 74, 0.06);
  --focus: 0 0 0 3px rgba(200, 67, 43, 0.28);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--basis); font-size: 16px; line-height: 1.55;
  color: var(--tekst); background: var(--grond);
}
img { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--kop); line-height: 1.1; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
a { color: var(--petrol); }
a:hover { color: var(--koraal-donker); }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
[hidden] { display: none !important; }

/* Knoppen */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; font-size: 16px; line-height: 1.2;
  padding: 14px 22px; min-height: 48px; border-radius: var(--pil); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s, color .15s;
}
.knop-actie { background: var(--koraal); color: var(--wit); }
.knop-actie:hover { background: var(--koraal-donker); color: var(--wit); }
.knop-rustig { background: var(--wit); color: var(--petrol); border-color: var(--petrol-lijn); }
.knop-rustig:hover { border-color: var(--petrol); color: var(--petrol); }
.knop-donker { background: var(--petrol); color: var(--wit); }
.knop-donker:hover { background: var(--petrol-2); color: var(--wit); }
.knop-klein { min-height: 40px; padding: 9px 16px; font-size: 14.5px; }
.knop-gevaar { background: var(--wit); color: var(--rood); border-color: #F2C9C4; }
.knop-gevaar:hover { background: var(--rood-zacht); color: var(--rood); }
.knop[disabled] { opacity: .55; cursor: not-allowed; }

/* Formulieren */
.veld { display: flex; flex-direction: column; gap: 6px; }
.veld > label, .label { font-size: 14px; font-weight: 600; color: var(--tekst-2); }
.invoer, .veld input, .veld select, .veld textarea {
  font: inherit; font-size: 16px; color: var(--tekst); background: var(--wit);
  border: 1.5px solid var(--petrol-lijn); border-radius: var(--radius-s); padding: 12px 14px; width: 100%;
  min-height: 48px; transition: border-color .15s, box-shadow .15s;
}
.veld textarea { min-height: 110px; resize: vertical; }
.invoer:focus, .veld input:focus, .veld select:focus, .veld textarea:focus { outline: none; border-color: var(--koraal); box-shadow: var(--focus); }
.hulp { font-size: 13.5px; color: var(--tekst-3); margin: 0; }
.vink { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.vink input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--koraal); flex-shrink: 0; }

/* Kaarten en badges */
.kaart { background: var(--wit); border-radius: var(--radius); box-shadow: var(--schaduw-s); }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--pil); font-size: 13px; font-weight: 600; white-space: nowrap; background: var(--petrol-zacht); color: var(--petrol); }
.badge-groen { background: var(--groen-zacht); color: var(--groen); }
.badge-oranje { background: var(--oranje-zacht); color: var(--oranje); }
.badge-rood { background: var(--rood-zacht); color: var(--rood); }
.badge-blauw { background: var(--blauw-zacht); color: var(--blauw); }
.badge-koraal { background: var(--koraal-zacht); color: var(--koraal-donker); }

/* Meldingen */
.melding { padding: 13px 16px; border-radius: var(--radius-s); font-weight: 500; }
.melding-ok { background: var(--groen-zacht); color: var(--groen); }
.melding-fout { background: var(--rood-zacht); color: var(--rood); }
.melding-info { background: var(--petrol-zacht); color: var(--petrol); }

.verborgen-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }