/* base.css — design tokens, reset, typography.
   Studio — function over form. Light mode default; .theme-dark overrides. */

:root {
  /* Tells the browser which way its own widgets should be painted. Without it
     every native control — most visibly the date field's calendar button — is
     drawn light-on-light in dark mode, which is why the pickers looked missing
     rather than merely ugly. */
  color-scheme: light;

  /* Brand — Elke Vanhouche (zacht paars) */
  --elke: #7C5CBF;
  --elke-light: #F0EAFA;
  --elke-text: #4B3572;

  /* Brand — Sunkissed (warm amber) */
  --sunkissed: #E07A2F;
  --sunkissed-light: #FEF3EA;
  --sunkissed-text: #9A4E13;

  /* Brand — MOOD (diep roze; de enige vrije tint naast de statuskleuren) */
  --mood: #C2436B;
  --mood-light: #FCEBF0;
  --mood-text: #8A2647;

  /* Status pipeline */
  --status-proposed: #B07A12;         /* Voorstel gedaan — in afwachting */
  --status-not-selected: #9B3E2E;     /* Niet geselecteerd — terminal */
  --status-planned: #6B7280;          /* Gepland */
  /* Gepost — the left edge of "delivered". Teal, because it sits between the
     Gepland grey and the Klaar-voor-factuur blue on the pipeline and should
     read as a step toward them rather than as a fourth signal. Distinct from
     --deal-mixed (#1F6F7A) by being lighter and less green; the two never
     appear as text on the same ground. */
  --status-posted: #12747F;           /* Gepost — staat live */
  --status-can-be-invoiced: #1D6FAE;  /* Klaar voor factuur */
  --status-invoiced: #2E7D5E;         /* Gefactureerd */
  --status-statistics-shared: #6D28D9;/* Statistieken gedeeld */
  --status-paid: #15654A;             /* Betaald — geld binnen */

  /* Pale companions for pills (dark mode overrides below) */
  --status-proposed-bg: #FBF2DE;
  --status-not-selected-bg: #F8E9E5;
  --status-paid-bg: #DDF0E7;
  --status-planned-bg: #F1F2F4;
  --status-posted-bg: #E2F1F2;
  --status-can-be-invoiced-bg: #E5F0F8;
  --status-invoiced-bg: #E4F2EB;
  --status-statistics-shared-bg: #EFE7FB;

  /* Time phases on the Rapport geldstroom panel. Deliberately borrowed from the
     status pipeline rather than invented: each column *is* a stretch of that
     pipeline, so Verwacht taking the Gepland grey is the same reasoning that
     gives `.kpi--won` its stripe. Saturation drops left to right, which is the
     honest reading — the further right, the less certain the money. */
  --phase-realised: var(--status-paid);
  --phase-ontheway: var(--status-can-be-invoiced);
  /* Not `var(--status-planned)`: that grey is a pill background's companion, and
     as 11px uppercase chip *text* it measures 4.3:1 on its own chip ground —
     under the 4.5:1 floor. Same reasoning for the "alle fases" grey, which is
     --text-subtle and fails at 4.2:1. Both are darkened here and lifted in the
     dark block, exactly like the status colours above. */
  --phase-expected: #4B5563;
  --phase-whole: #5F5D69;
  /* Forecast bars on the month chart: the earned green at low opacity, so the
     eye reads one income story while never mistaking a forecast for a fact. */
  --forecast-fill: rgba(21, 101, 74, 0.26);

  /* Deal-type badges. `mixed` sits between paid-green and barter-orange without
     borrowing either, so a cash+barter deal never reads as one or the other. */
  --deal-paid: #2E7D5E;
  --deal-mixed: #1F6F7A;
  --deal-barter: #B05D1A;
  /* Indigo. Nowhere near the barter orange, which sits beside it in the Posts
     value cell, and deliberately not violet either: --elke (#7C5CBF) draws the
     dashed trend line on the same Rapport chart this now adds a series to. */
  --deal-counter-invoice: #3A4CA8;
  --deal-organic: #9E9E9E;

  /* Calendar to-do's — the work that happens before a post goes live.
     Deliberately NOT a new hue. The day cell already encodes account by colour
     (--elke / --sunkissed / --mood) and status by dot; a third colour language
     in 116px would fight both, and the palette has no room left that does not
     collide with a status or deal colour. The to-do stands out by being the
     only SOLID block in the grid instead of by being another tint — form, not
     hue, which is also the one axis the account colours are not already using.
     In dark mode the bar inverts (light ground, dark ink) so it keeps that
     "only solid block" property against a dark surface. */
  --todo-ink: #23222B;
  --todo-on-ink: #FFFFFF;
  --todo-late: #B03A0A;          /* white on this = 7.9:1 */
  --todo-on-late: #FFFFFF;
  --todo-cell: rgba(35, 34, 43, 0.045);
  --todo-cell-late: rgba(176, 58, 10, 0.07);

  /* Post types on the calendar chip — TWO colours, not four.
     The account did not lose its colour, it lives on a 3px rail on the left,
     the same device .dayitem already uses.

     The colour answers exactly one question: gaat deze dag hieraan op? That is
     the `weight` in CONTENT_TYPES, the same field dayCapacity reads, so the
     chip and the "dag is vol" wash on the cell behind it are now one rule
     rendered twice and can no longer disagree. Reel and carrousel are one
     colour, story and reminder the other; the icon says which of the two.
     Four types on four fills is what nobody could read.

     Dark-and-saturated for the weight that fills the day, light-and-warm for
     the weight that fits around it. The difference is in lightness as well as
     hue, so it survives being colourblind and it survives a 46px phone cell.

     These ARE solid, which retires an older claim in this file: --todo-ink used
     to be the only massive block in the grid, and that was what made "ik moet
     hier nog iets doen" readable without reading. It no longer carries that
     alone. What separates a to-do bar now is the tick-box no post chip has, its
     own near-black ground, and the corner flag — three devices instead of one,
     and the flag is still the only one countable across 35 cells. */
  --type-feed: #1F4E5F;          /* reel + carrousel: vult de dag */
  --type-feed-on: #FFFFFF;       /* on --type-feed = 9.02:1 */
  --type-light: #EDCB86;         /* story + reminder: past er altijd bij */
  --type-light-on: #47340F;      /* on --type-light = 7.70:1 */

  /* A chip whose collaboration is still only a VOORSTEL keeps its hue and
     loses its weight: same colour, pale, dashed outline. It has to keep the
     hue — a proposed reel already counts towards dayCapacity, so a colourless
     chip under a cell washed "vol" would be the grid contradicting itself.

     Deep enough to keep the two hues apart at chip size, which the first pass
     was not: a pale-cool and a pale-warm bar side by side in a 116px cell read
     as the same bar, and a day holding a proposed reel next to a proposed story
     is exactly where the difference has to survive. */
  --type-feed-soft: #C9DAE2;
  --type-light-soft: #FAEAC4;
  /* The dashed outline is a non-text indicator and owes 3:1 (WCAG 1.4.11), on
     the soft fills as well as on the bare cell: 3.26:1 on --type-feed-soft,
     3.92:1 on --type-light-soft, 4.66:1 on white. */
  --type-line: #6B7681;

  /* Day capacity. Only the full day gets a wash, and it is quieter than
     --todo-cell on purpose: open work outranks a booked day, and the two share
     the cell background. "Ruimte" is said in words at the bottom of the cell
     instead, which survives the to-do tint and doubles as the place to click. */
  --cap-full: rgba(38, 51, 61, 0.055);

  /* Surfaces & lines */
  --bg: #F9F8F6;
  --surface: #FFFFFF;
  --surface-2: #FBFAF8;
  --border: #EBEBEB;
  --border-strong: #DDDDDD;

  /* Text */
  --text: #1F1D1B;
  --text-muted: #6B7280;
  --text-subtle: #9A9892;

  /* Feedback */
  --danger: #C2410C;
  --danger-bg: #FEF2F0;
  --success: #2E7D5E;
  --warning: #B45309;
  --warning-bg: #FEF6E7;

  /* Typografieschaal */
  --text-label: 13px;
  --text-body: 15px;
  --text-heading: 18px;
  --text-figure: 24px;

  /* Radius */
  --radius-card: 10px;
  --radius-badge: 6px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Elevation — subtle, function over form */
  --shadow-sm: 0 1px 2px rgba(20, 18, 16, 0.05);
  --shadow-panel: -4px 0 24px rgba(20, 18, 16, 0.10);
  --shadow-modal: 0 12px 40px rgba(20, 18, 16, 0.18);

  /* Motion — minimal */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --topnav-height: 60px;
  --bottomnav-height: 60px;
  --content-max: 1320px;
  --tap-min: 44px;
}

.theme-dark {
  color-scheme: dark;

  --elke-light: #2A2140;
  --elke-text: #C8B6EC;
  --sunkissed-light: #3A2410;
  --sunkissed-text: #F0B488;
  --mood-light: #3A1725;
  --mood-text: #F0A0BB;

  --bg: #16151A;
  --surface: #1E1D24;
  --surface-2: #24232B;
  --border: #2E2D36;
  --border-strong: #3A3943;

  --text: #ECEAE6;
  --text-muted: #A6A4AE;
  --text-subtle: #76747E;

  --danger-bg: #3A1A12;
  --warning-bg: #3A2A10;

  /* The to-do bar inverts: a near-black block on a #1E1D24 cell would vanish,
     and the whole point is that it is the loudest thing in the grid. Late
     stays a red ground — red is the one signal that must not flip meaning
     between themes — but lifted, the same way the status colours are. */
  --todo-ink: #ECEAE6;
  --todo-on-ink: #16151A;
  --todo-late: #E0572A;
  --todo-on-late: #1A0C06;       /* dark ink on the lifted red = 7.4:1 */
  --todo-cell: rgba(236, 234, 230, 0.06);
  --todo-cell-late: rgba(224, 87, 42, 0.12);

  /* The two type colours lift rather than invert: the light theme's petrol
     goes muddy on a dark cell and its sand goes blinding. Same two hues, same
     ordering — feed still reads as the heavier block — pitched for a #1E1D24
     ground. The soft pair sinks instead of lifting, for the same reason it is
     pale in the light theme: a voorstel must read as less than a booked day. */
  --type-feed: #2E6A7D;
  --type-feed-on: #F2FAFC;       /* on --type-feed = 5.71:1 */
  --type-light: #C9A461;
  --type-light-on: #2A1E06;      /* on --type-light = 6.99:1 */
  /* Sunk further than the cell rather than lifted, and far enough apart that
     the blue one and the brown one are still two colours at 116px. */
  --type-feed-soft: #1B333D;
  --type-light-soft: #33280F;
  --type-line: #72808D;          /* 3.26:1 on --type-feed-soft, same 3:1 duty */

  --cap-full: rgba(220, 230, 238, 0.05);

  /* Status pills: lift the ink, sink the ground. */
  --status-proposed: #E0AE49;
  --status-not-selected: #E08A72;
  --status-paid: #4FC79A;
  /* Lifted like the others: #12747F on a dark pill ground reads at 2.6:1. */
  --status-posted: #4FB8C4;
  --status-proposed-bg: #3A2E12;
  --status-not-selected-bg: #3A211B;
  --status-paid-bg: #123A2C;
  --status-planned-bg: #2A2933;
  --status-posted-bg: #103034;
  --status-can-be-invoiced-bg: #12293A;
  --status-invoiced-bg: #143026;
  --status-statistics-shared-bg: #2A1E3E;

  /* The two grey phase chips have to be lifted, not darkened, or they read at
     3.3:1 and 3.4:1 against their own chip grounds. The forecast fill likewise
     has to be restated: a wash mixed for a white ground disappears on #16151A. */
  --phase-expected: #9CA3AF;
  --phase-whole: #A6A4AE;
  --forecast-fill: rgba(79, 199, 154, 0.30);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-panel: -4px 0 24px rgba(0, 0, 0, 0.4);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
* { -webkit-tap-highlight-color: transparent; }

html {
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--text-body);
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--text-figure); }
h2 { font-size: var(--text-heading); }
h3 { font-size: var(--text-body); }
p { margin: 0; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input, select, textarea {
  font: inherit;
  color: var(--text);
}

ul { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus — visible and designed */
:focus-visible {
  outline: 2px solid var(--elke);
  outline-offset: 2px;
  border-radius: var(--radius-badge);
}

/* Utility text styles */
.text-muted { color: var(--text-muted); }
.text-subtle { color: var(--text-subtle); font-size: var(--text-label); }
.label { font-size: var(--text-label); font-weight: 500; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}