/*
 * VindJouwTender.nl - Kleurensysteem stijl 5 (Grafiet & Koper)
 * Basis: #232B31, #B55B32, #F1A46D, #F5F2EF
 * Uitgebreide tokens zijn ontwerpvoorstellen, niet eerder vastgelegde huisstijlkleuren.
 * Gebruik semantische tokens in UI-componenten; gebruik brandkleuren voor accenten.
 */
:root {
  /* 1. Originele basiskleuren */
  --vjt-brand-graphite: #232B31;
  --vjt-brand-copper: #B55B32;
  --vjt-brand-copper-light: #F1A46D;
  --vjt-brand-ivory: #F5F2EF;
  --vjt-brand-slate: #6B737B; /* uit de bredere merkpresentatie; niet als lopende tekst op ivoor gebruiken */

  /* 2. Grafiet tinten */
  --vjt-graphite-50: #F8FAFA;
  --vjt-graphite-100: #EFF2F3;
  --vjt-graphite-200: #DCE2E5;
  --vjt-graphite-300: #BAC4CB;
  --vjt-graphite-400: #92A0A8;
  --vjt-graphite-500: #687780;
  --vjt-graphite-600: #4D5B64;
  --vjt-graphite-700: #354149;
  --vjt-graphite-800: #232B31;
  --vjt-graphite-900: #172026;
  --vjt-graphite-950: #101619;

  /* 3. Koper tinten */
  --vjt-copper-50: #FFF4EC;
  --vjt-copper-100: #FFE6D6;
  --vjt-copper-200: #F8CCB1;
  --vjt-copper-300: #F1A46D;
  --vjt-copper-400: #D97B49;
  --vjt-copper-500: #B55B32;
  --vjt-copper-600: #9B4B29;
  --vjt-copper-700: #7A391F;
  --vjt-copper-800: #592D1D;
  --vjt-copper-900: #3B2119;

  /* 4. Warme neutrale tinten */
  --vjt-neutral-50: #FFFFFF;
  --vjt-neutral-100: #FBF9F7;
  --vjt-neutral-200: #F5F2EF;
  --vjt-neutral-300: #E8DED7;
  --vjt-neutral-400: #DDD6D0;
  --vjt-neutral-500: #B7A99F;
  --vjt-neutral-600: #91857D;

  /* 5. Betekenisvolle statuskleuren - NIET vervangen door merkaccenten */
  --vjt-success: #216547;
  --vjt-success-bg: #E5F4EC;
  --vjt-warning: #9A571B;
  --vjt-warning-bg: #FFF0D9;
  --vjt-danger: #AD3344;
  --vjt-danger-bg: #FCE8EB;
  --vjt-info: #275A75;
  --vjt-info-bg: #E9F2F7;

  /* 6. Diagramreeksen: onafhankelijk van statusbetekenis */
  --vjt-chart-1: #B55B32;
  --vjt-chart-2: #456878;
  --vjt-chart-3: #948233;
  --vjt-chart-4: #786A91;
  --vjt-chart-5: #2C7A63;
  --vjt-chart-6: #997B65;

  /* 7. Licht thema: gebruik deze tokens in componenten */
  --vjt-bg: #F5F2EF;
  --vjt-surface: #FFFFFF;
  --vjt-surface-subtle: #FBF9F7;
  --vjt-surface-highlight: #FFF4EC;
  --vjt-text: #232B31;
  --vjt-text-secondary: #59666F;
  --vjt-text-soft: #687780; /* alleen voor niet-essentiële grote UI of labels; check contrast */
  --vjt-heading: #172026;
  --vjt-border: #DDD6D0;
  --vjt-border-strong: #91857D;
  --vjt-link: #9B4B29;
  --vjt-focus: #B55B32;
  --vjt-primary: #B55B32;
  --vjt-primary-hover: #9B4B29;
  --vjt-primary-text: #FFFFFF;
  --vjt-secondary: #232B31;
  --vjt-secondary-text: #FFFFFF;
  --vjt-sidebar: #232B31;
  --vjt-sidebar-active: #B55B32;
  --vjt-sidebar-text: #F5F2EF;
  --vjt-sidebar-muted: #DCE2E5;
  --vjt-table-stripe: #FBF9F7;
  --vjt-table-hover: #FFF4EC;
}

/* Optionele donkere modus. Zet data-theme="dark" op een omvattend element. */
[data-theme="dark"] {
  --vjt-bg: #101619;
  --vjt-surface: #232B31;
  --vjt-surface-subtle: #2F3A41;
  --vjt-surface-highlight: #3B2B26;
  --vjt-text: #F5F2EF;
  --vjt-text-secondary: #DCE2E5;
  --vjt-text-soft: #BAC4CB;
  --vjt-heading: #FFFFFF;
  --vjt-border: #4D5B64;
  --vjt-border-strong: #92A0A8;
  --vjt-link: #F1A46D;
  --vjt-focus: #F1A46D;
  --vjt-primary: #F1A46D;
  --vjt-primary-hover: #F8CCB1;
  --vjt-primary-text: #232B31;
  --vjt-secondary: #354149;
  --vjt-secondary-text: #FFFFFF;
  --vjt-sidebar: #172026;
  --vjt-sidebar-active: #7A391F;
  --vjt-sidebar-text: #FFFFFF;
  --vjt-sidebar-muted: #DCE2E5;
  --vjt-table-stripe: #2F3A41;
  --vjt-table-hover: #3B2B26;

  /* Donkere statuschips hebben een eigen tekst-/achtergrondcombinatie nodig */
  --vjt-success: #8BDBAF;
  --vjt-success-bg: #183B2D;
  --vjt-warning: #FFD28B;
  --vjt-warning-bg: #4C341D;
  --vjt-danger: #FFA6AE;
  --vjt-danger-bg: #51262F;
  --vjt-info: #9ACBE8;
  --vjt-info-bg: #213C4E;
}

/* Voorbeeldtoepassing (optioneel):
body { background: var(--vjt-bg); color: var(--vjt-text); }
.card { background: var(--vjt-surface); border: 1px solid var(--vjt-border); }
.button-primary { background: var(--vjt-primary); color: var(--vjt-primary-text); }
.button-primary:hover { background: var(--vjt-primary-hover); }
*/

/* Spacing/radius match the inspected VJT Figma foundations. */
:root { --vjt-space-0:0; --vjt-space-1:4px; --vjt-space-2:8px; --vjt-space-3:12px; --vjt-space-4:16px; --vjt-space-5:20px; --vjt-space-6:24px; --vjt-space-8:32px; --vjt-space-12:48px; --vjt-radius-sm:6px; --vjt-radius-md:10px; --vjt-radius-lg:16px; --vjt-radius-xl:24px; --vjt-radius-pill:999px; }

:root{color-scheme:light}html[data-theme="dark"]{color-scheme:dark}