/* nuchtr, design tokens. Basis: hoofdstuk 2 van de ontwerpspecificatie, kleuren, letters en hoeken volgens het brandboek van nuchtr
   (alleen zwart en wit, gain en loss alleen in data, Geist en Geist Mono, geen verloop, gloed of glas). */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

/* 2.1 Kleur */
:root {
  color-scheme: dark;

  /* Vlakken */
  --bg:            #0B0B0C;   /* paper (brandboek) */
  --bg-2:          #0F0F11;   /* zijbalk, drawers, sheets, popovers */
  --panel:         #151517;   /* paper-raised: kaarten en panelen */
  --panel-glass:   #151517;   /* geen glaseffect (brandboek), dus solide */
  --panel-2:       #1B1B1E;   /* genest vlak, inputs, lege kalendercel, skeleton */
  --panel-3:       #232327;   /* hover op panel-2, geselecteerde rij, spoor van ringen, les-pill */

  /* Lijnen */
  --line:          #262629;   /* line (brandboek) */
  --line-2:        rgba(255,255,255,.14);
  --line-3:        rgba(255,255,255,.22);
  --grid:          rgba(255,255,255,.06);

  /* Tekst */
  --ink:           #F4F4F2;   /* ink (brandboek) */
  --ink-2:         #A3A3A9;   /* ink-muted (brandboek) */
  --ink-3:         #7A7A81;   /* labels uppercase, placeholders */
  --ink-4:         #46464d;   /* uitgeschakeld, lege-cel-dagnummer */

  /* Uitkomst (de enige kleuren) */
  --pos:           #45D48A;  --pos-fill: #12301F;  --pos-soft: rgba(69,212,138,.14);   /* gain, alleen in data */
  --neg:           #FF7A6E;  --neg-fill: #3A1C19;  --neg-soft: rgba(255,122,110,.14); /* loss, alleen in data */
  --flat:          #7A7A81;  --flat-fill: #232327;

  /* Spaarzame accenten */
  --accent:        #F4F4F2;   /* selectie, actieve segment, score-knop, primaire knop */
  --accent-ink:    #0B0B0C;
  --live:          #F4F4F2;   /* was blauw; nuchtr heeft geen accentkleur */
  --live-soft:     rgba(244,244,242,.12);
  --gold:          #D9D9D6;   /* eigen vermogen, in grijs (geen accentkleur) */
  --gold-soft:     rgba(244,244,242,.10);
  --warn:          #A3A3A9;   /* alleen propfirm-buffer tussen 20 en 40 procent en de score-schaal op 50 */
  --warn-soft:     rgba(163,163,169,.14);

  /* Schaduw */
  --shadow-panel:  none;   /* vlakken scheiden met een rand, niet met schaduw */
  --shadow-pop:    none;
  --shadow-hover:  none;
  --shadow-fab:    none;

  /* Grijstinten voor portfolio-reeksen en meerdelige balken (2.1, 5.5) */
  --series-1: #F4F4F2; --series-2: #d6d6dc; --series-3: #b2b2ba; --series-4: #74747c; --series-5: #46464d;

  /* Score-schaal: geen verloop meer (brandboek), een effen spoor met de knop erop */
  --score-gradient: var(--panel-3);
}

/* 2.2 Typografie */
:root {
  --font:       "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;  /* elk getal dat je vergelijkt */
  --font-serif: var(--font);   /* geen cursief accent meer (brandboek) */

  --t-display: 40px;  --t-display-lh: 1.05;  --t-display-ls: -.02em;
  --t-big:     32px;
  --t-kpi:     24px;
  --t-h1:      24px;  --t-h1-ls: -.02em;
  --t-h2:      18px;
  --t-stat:    20px;
  --t-sub:     17px;
  --t-body:    14px;
  --t-ui:      13px;
  --t-small:   12px;
  --t-label:   11px;  --t-label-ls: .08em;
  --t-micro:   10px;
  --t-serif:   1em;
  --t-lesson:  16px;  --t-lesson-lh: 1.65;
}
@media (max-width: 767px) {
  :root {
    --t-display: 34px; --t-big: 28px; --t-kpi: 22px; --t-h1: 22px; --t-h2: 17px; --t-stat: 18px;
  }
}
html { font-family: var(--font); font-feature-settings: 'tnum'; letter-spacing: -.006em; color: var(--ink); background: var(--bg); }
body { font-size: 14px; line-height: 1.5; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* 2.3 Spacing en raster */
:root {
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --page-max: 1360px;  --page-pad: 32px;        /* 16 px onder 768 px, 24 px op tablet */
  --gap-tile: 12px;    --gap-section: 16px;     --gap-cal: 6px;   /* 4 px op mobiel */
  --pad-card: 20px;    /* 24 px op grote panelen vanaf 1024 px, 16 px op mobiel */
  --sidebar-w: 84px;   --sidebar-w-open: 240px; --bottomnav-h: 64px;
}
@media (max-width: 1023px) { :root { --page-pad: 24px; } }
@media (max-width: 767px)  { :root { --page-pad: 16px; --gap-cal: 4px; --pad-card: 16px; } }

/* 2.4 Radius */
:root {
  --r-xs: 4px;    /* chips, kalender-weektegel, kleine knoppen, grade-chip */
  --r-sm: 4px;    /* kalendercel, input, tabel-rijhover */
  --r-md: 4px;   /* segment-control buiten (knoppen erin 7 px), knoppen */
  --r-lg: 8px;   /* kaarten en panelen */
  --r-xl: 8px;   /* popover, drawer-hoek, dialog, sheet-bovenkant */
  --r-side: 8px; /* zwevende zijbalk */
  --r-pill: 999px;/* pillen, avatars, score-knop, telpillen */
}

/* 2.6 Motion-tokens */
:root {
  --ease:      cubic-bezier(.22,1,.36,1);  --ease-out: cubic-bezier(.16,1,.3,1);  --ease-in: cubic-bezier(.4,0,1,1);
  --ease-overshoot: cubic-bezier(.34,1.56,.64,1); /* alleen de grade-chip (6.8) */
  --d-fast: 150ms;  --d-pop: 180ms;  --d-dialog: 220ms;  --d-panel: 480ms;  --d-stagger: 60ms;
  --d-count: 900ms; --d-count-unit: 500ms; --d-score: 900ms; --d-draw: 600ms; --d-cal: 12ms; --d-switch: 300ms;
}
@media (max-width: 767px) { :root { --d-panel: 320ms; --d-stagger: 40ms; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* 2.8 Lagen */
:root {
  --z-sticky: 30; --z-sidebar: 20; --z-drawer: 40; --z-popover: 50; --z-dialog: 60; --z-toast: 70; --z-admin: 80;
}