/* ============================================================================
   CoachDossier — Design Tokens  ·  "Bloei" (richting Richting-02, def.)
   Single source of truth voor kleur, typografie, ruimte, radius en schaduw.
   Handoff: kopieer naar /static/css/tokens.css en laad VÓÓR de overige
   stylesheets. Alle waarden zijn CSS custom properties.

   Palet: warme crème, gedempt teal, klei. Geen inkt-zwart — donkere vlakken
   zijn een zacht diep-teal. Logo: beeldmerk "Bloei" (vijf bladeren, open hart).

   Themavarianten (op <html> of een container):
     data-surface="light" (default) | "deep"
   ========================================================================== */

:root {
  /* ---- Kleurprimitieven --------------------------------------------------
     Gebruik in productie uitsluitend de SEMANTISCHE tokens, niet deze. */

  /* Teal — merkanker (gedempt, rustig; nooit koel-fel) */
  --petrol-950: #26474B;  /* diepste teal — hero / cta / footer */
  --petrol-900: #2F5358;  /* diep teal — sidebar / merkvlakken (was inkt-zwart) */
  --petrol-800: #386267;
  --petrol-700: #34646B;  /* action-hover */
  --petrol-600: #3F757B;  /* teal — knoppen, links, focus */
  --petrol-500: #5B8E92;
  --petrol-400: #6FA0A3;
  --petrol-300: #8FC0C2;  /* zacht teal — accenten op donker, woordmerk "Dossier" */
  --petrol-200: #BBD9DA;
  --petrol-100: #DCE9E8;  /* teal-soft — zachte vlakken, geselecteerde staat */
  --petrol-50:  #EDF4F3;

  /* Heritage-blauw — bewaard als variant */
  --blue-950: #0E1A24; --blue-900: #16242E; --blue-700: #244A66;
  --blue-600: #2E5073; --blue-300: #7EB0CE; --blue-100: #DCEAF3; --blue-50: #EDF3F8;

  /* Pine — alternatief anker, bewaard als variant */
  --pine-950: #0F1F1A; --pine-900: #142A23; --pine-700: #21493C;
  --pine-600: #2C6150; --pine-300: #88BBA6; --pine-100: #DDEBE2; --pine-50: #EEF5F0;

  /* Stone — warme crème-neutralen (de "warmte" onder de UI) */
  --stone-950: #1F1C18;
  --stone-900: #2A2620;
  --stone-800: #3A352F;  /* ≈ tekst — warm bijna-zwart */
  --stone-700: #4A453C;
  --stone-600: #756E63;  /* gedempte tekst */
  --stone-500: #9A9285;  /* subtiele tekst */
  --stone-400: #B3AC9F;
  --stone-300: #CFC8BA;  /* sterke rand */
  --stone-200: #E0DACE;
  --stone-150: #E6DFD2;  /* hairline rand op crème */
  --stone-100: #EDE7DC;  /* genest oppervlak, inputs */
  --stone-50:  #F4EFE7;  /* paginadoek — warme crème */
  --paper:     #FBF8F2;  /* zacht warm papier voor kaarten — nooit puur wit */

  /* Clay — warm accent */
  --clay-700: #A85F3A;
  --clay-600: #C2774E;  /* klei — accent */
  --clay-500: #CF8861;
  --clay-300: #E0A878;  /* zachte klei — accent op donker */
  --clay-100: #F2E2D5;  /* klei-soft */
  --clay-50:  #FAF0E7;

  /* Sage — succes */
  --sage-700: #5C7A5E;
  --sage-600: #6E8A6F;  /* salie */
  --sage-100: #DDE7DC;
  --sage-50:  #EEF3ED;

  /* Bordeaux — kritiek/gevaar (spaarzaam) */
  --danger-700: #8A2E2E;
  --danger-100: #F4DEDE;

  /* ---- Structuurgroep-kleuren (diagnostiek) -----------------------------
     Gelijke verzadiging/helderheid; onderling onderscheidbaar, harmonieus. */
  --groep-psychotisch:        #5B3E6E;  --groep-psychotisch-licht:  #ECE6F1;
  --groep-sociopathisch:      #9A4B36;  --groep-sociopathisch-licht:#F3E6E0;
  --groep-neurotisch:         #2A5A6B;  --groep-neurotisch-licht:   #E2EDF0;
  --groep-overig:             #3C6A55;  --groep-overig-licht:       #E2EDE7;

  /* ====================================================================== */
  /* SEMANTISCHE TOKENS — gebruik DEZE in componenten                       */
  /* ====================================================================== */

  /* Oppervlakken (light, default) */
  --canvas:        var(--stone-50);    /* paginadoek — warme crème */
  --surface:       var(--paper);       /* kaarten / panelen */
  --surface-2:     var(--stone-100);   /* genest oppervlak, inputs */
  --surface-sunken:var(--stone-150);

  /* Merk-oppervlakken (donker — sidebar, hero, headers, footer) */
  --brand-canvas:  var(--petrol-900);  /* sidebar / hero — zacht diep-teal */
  --brand-canvas-2:var(--petrol-800);
  --brand-deep:    var(--petrol-950);
  --on-brand:      #F4EFE7;            /* tekst op merk-donker */
  --on-brand-muted:#B7C9C7;

  /* Tekst */
  --text:          #3A352F;            /* warm bijna-zwart */
  --text-muted:    var(--stone-600);
  --text-subtle:   var(--stone-500);
  --text-on-accent:#FFFFFF;

  /* Merk / actie */
  --brand:         var(--petrol-900);  /* primaire merkkleur (logo, woordmerk, btn-dark) */
  --brand-strong:  var(--petrol-950);
  --action:        var(--petrol-600);  /* knoppen, links, focus */
  --action-hover:  var(--petrol-700);
  --action-soft:   var(--petrol-100);  /* zachte vlakken, geselecteerde staat */

  /* Accent & status */
  --accent:        var(--clay-600);
  --accent-soft:   var(--clay-100);
  --success:       var(--sage-600);
  --success-soft:  var(--sage-100);
  --warning:       var(--clay-600);
  --warning-soft:  var(--clay-50);
  --danger:        var(--danger-700);
  --danger-soft:   var(--danger-100);

  /* Lijnen & focus */
  --border:        #E6DFD2;            /* hairline op canvas */
  --border-strong: var(--stone-300);
  --border-onbrand:rgba(255,255,255,.12);
  --ring:          color-mix(in oklab, var(--action) 35%, transparent);

  /* ---- Typografie -------------------------------------------------------- */
  --font-display: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Schaal (1.20 — major third) */
  --text-2xs:  0.6875rem; --text-xs:   0.75rem;   --text-sm:   0.8125rem;
  --text-base: 0.9375rem; --text-md:   1.0625rem; --text-lg:   1.25rem;
  --text-xl:   1.5rem;    --text-2xl:  1.875rem;  --text-3xl:  2.375rem;
  --text-4xl:  3rem;      --text-5xl:  3.75rem;

  --weight-normal:400; --weight-medium:500; --weight-semibold:600;
  --weight-bold:700;   --weight-extra:800;

  --leading-tight:1.15; --leading-snug:1.3; --leading-normal:1.55; --leading-relaxed:1.75;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-eyebrow:0.14em;

  /* ---- Ruimte (4px-basis) ----------------------------------------------- */
  --space-0:0; --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem;
  --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:2.5rem;
  --space-8:3rem; --space-9:4rem; --space-10:5rem; --space-12:6rem;

  /* ---- Radius ----------------------------------------------------------- */
  --radius-xs:4px; --radius-sm:6px; --radius-md:9px;
  --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;

  /* ---- Schaduw (warm getint, zacht) ------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(58,53,47,.05);
  --shadow-sm: 0 1px 3px rgba(58,53,47,.06), 0 1px 2px rgba(58,53,47,.04);
  --shadow-md: 0 4px 12px rgba(58,53,47,.08), 0 2px 4px rgba(58,53,47,.05);
  --shadow-lg: 0 12px 28px rgba(46,86,91,.14), 0 4px 8px rgba(46,86,91,.07);
  --shadow-xl: 0 24px 56px rgba(38,71,75,.20);
  --shadow-ring:0 0 0 3px var(--ring);

  /* ---- Beweging --------------------------------------------------------- */
  --ease-out:cubic-bezier(.22,.61,.36,1); --ease-in-out:cubic-bezier(.45,.05,.55,.95);
  --dur-fast:.12s; --dur-base:.2s; --dur-slow:.36s;

  /* ---- Layout ----------------------------------------------------------- */
  --sidebar-w:256px; --content-max:980px; --reading-max:680px;
}

/* ====================================================================== */
/* ACCENT-VARIANTEN (bewaard — niet de hoofdrichting)                      */
/* ====================================================================== */
:root[data-accent="blue"] {
  --brand-canvas:var(--blue-900); --brand-canvas-2:var(--blue-700); --brand-deep:var(--blue-950);
  --brand:var(--blue-900); --brand-strong:var(--blue-950);
  --action:var(--blue-600); --action-hover:var(--blue-700); --action-soft:var(--blue-100);
  --groep-neurotisch:#2E5073; --groep-neurotisch-licht:#E2EAF2;
}
:root[data-accent="pine"] {
  --brand-canvas:var(--pine-900); --brand-canvas-2:var(--pine-700); --brand-deep:var(--pine-950);
  --brand:var(--pine-900); --brand-strong:var(--pine-950);
  --action:var(--pine-600); --action-hover:var(--pine-700); --action-soft:var(--pine-100);
}

/* ====================================================================== */
/* SURFACE-VARIANT — donkere werkruimte (zacht diep-teal)                  */
/* ====================================================================== */
:root[data-surface="deep"] {
  --canvas:var(--petrol-950); --surface:var(--petrol-900); --surface-2:var(--petrol-800);
  --surface-sunken:#1E3D41;
  --text:#EAF1F0; --text-muted:#A9C2C0; --text-subtle:#86A3A2;
  --border:rgba(255,255,255,.10); --border-strong:rgba(255,255,255,.17);
  --paper:var(--petrol-900);
}
:root[data-surface="deep"][data-accent="blue"] {
  --canvas:var(--blue-950); --surface:var(--blue-900); --surface-2:#1D3346;
}
:root[data-surface="deep"][data-accent="pine"] {
  --canvas:var(--pine-950); --surface:var(--pine-900); --surface-2:#1A3A30;
}

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

/* ====================================================================== */
/* LEGACY-ALIASSEN — bewaard voor bestaande component-CSS in base.html    */
/* (niet gebruiken in nieuwe code — gebruik de semantische tokens)        */
/* ====================================================================== */
:root {
  --blue-dark:     var(--brand-canvas);
  --blue-mid:      var(--action);
  --blue-light:    var(--action-soft);
  --bg:            var(--canvas);
  --muted:         var(--text-muted);
  --orange:        var(--accent);
  --orange-bg:     var(--accent-soft);
  --orange-border: var(--clay-300);
  --radius:        8px;
  --shadow:        0 2px 10px rgba(58,53,47,.10);
  --teal-300:      var(--petrol-300);
  --teal-deep:     var(--action-hover);
  --sage:          var(--success);
  --bordeaux:      var(--danger);
  --font:          var(--font-sans);
  --mono:          var(--font-mono);
}