/*
 * Axxon IT brand tokens
 * Officiële huisstijl: primair #3b0408 (burgundy), secundair #EC0127 (rood),
 * tekst #222222.
 */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&display=swap');

:root {
  /* Brand-kleuren */
  --axxon-primary: #3b0408;
  --axxon-primary-hover: #240204;
  --axxon-secondary: #EC0127;
  --axxon-secondary-hover: #c20020;
  --axxon-secondary-soft: #fde4e7;     /* zachte tint van #EC0127 voor backgrounds */
  --axxon-primary-soft: #f3e7e8;       /* zachte tint van #3b0408 */

  /* Tekst */
  --axxon-text: #222222;
  --axxon-text-muted: #5b5557;
  --axxon-text-faint: #9b9395;
  --axxon-text-on-primary: #ffffff;

  /* Surfaces */
  --axxon-bg: #faf7f8;
  --axxon-surface: #ffffff;
  --axxon-surface-2: #f3eeef;
  --axxon-border: #e8dfe1;
  --axxon-border-strong: #c9bcbf;

  /* Status */
  --axxon-success: #1a7f4a;
  --axxon-warning: #b56a09;
  --axxon-danger: var(--axxon-secondary);
  --axxon-info: #2c4a5e;
  --axxon-success-soft: #e6f3ec;
  --axxon-warning-soft: #fcefdc;
  --axxon-danger-soft: var(--axxon-secondary-soft);
  --axxon-info-soft: #e3edf4;

  /* Chart-palette — gebruikt door named charts in templates/dashboard/charts.js */
  --axxon-chart-1: #3b0408;   /* brand primair                         */
  --axxon-chart-2: #EC0127;   /* brand secundair                       */
  --axxon-chart-3: #f4868f;   /* lichte rood-pink                      */
  --axxon-chart-4: #8b1d2f;   /* mid burgundy                          */
  --axxon-chart-5: #2c4a5e;   /* steel-blue (complementair)            */
  --axxon-chart-6: #5d8aa1;   /* lichter steel-blue                    */
  --axxon-chart-7: #c19a3e;   /* warm gold (voor accenten/highlight)   */

  /* Schaduwen (cool grey, niet rood — voorkomt vieze tint) */
  --axxon-shadow: 0 1px 2px rgba(34, 34, 34, 0.05), 0 1px 3px rgba(34, 34, 34, 0.04);
  --axxon-shadow-lg: 0 6px 16px rgba(34, 34, 34, 0.08), 0 2px 6px rgba(34, 34, 34, 0.05);

  /* Typografie */
  --axxon-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --axxon-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --axxon-font-handwriting: "Caveat", "Marker Felt", "Comic Sans MS", cursive;

  /* Sizing */
  --axxon-radius: 10px;
  --axxon-radius-sm: 6px;
  --axxon-radius-lg: 14px;
  --axxon-sidebar-width: 240px;
  --axxon-sidebar-width-collapsed: 60px;
  --axxon-topbar-height: 64px;
  --axxon-content-max: 1200px;
}

html.dark {
  /* In dark-modus is de vibrant secundair beter zichtbaar dan de zeer donkere primair —
     we promoveren #EC0127 naar de visueel-leidende rol. */
  --axxon-primary: #EC0127;
  --axxon-primary-hover: #ff3550;
  --axxon-secondary: #ff4d68;
  --axxon-secondary-hover: #ff7387;
  --axxon-secondary-soft: #2a0a10;
  --axxon-primary-soft: #2a0a10;

  --axxon-text: #f3ecee;
  --axxon-text-muted: #b6a8ab;
  --axxon-text-faint: #7d6f72;
  --axxon-text-on-primary: #ffffff;

  --axxon-bg: #0c0608;
  --axxon-surface: #160a0d;
  --axxon-surface-2: #1f1014;
  --axxon-border: #2a181c;
  --axxon-border-strong: #3b2226;

  --axxon-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --axxon-shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);

  /* Charts: in dark mode iets lichtere varianten voor contrast */
  --axxon-chart-1: #ff4d68;
  --axxon-chart-2: #EC0127;
  --axxon-chart-3: #f4868f;
  --axxon-chart-4: #c44a5a;
  --axxon-chart-5: #6b9bc4;
  --axxon-chart-6: #98bcd6;
  --axxon-chart-7: #d8b765;

  /* Status soft-backgrounds in dark — donkerdere tinten van de status-kleur zelf */
  --axxon-success-soft: #0f2a1e;
  --axxon-warning-soft: #2c1e0a;
  --axxon-danger-soft: #2a0a10;
  --axxon-info-soft: #15232c;
}