/* kf-tokens.css — Karst Firewall 5.0 design tokens
   Single source of truth for all custom CSS properties used across the app.
   Load order: must come before kf-nav.css and any page-specific CSS.
   All token names follow the convention: --<category>-<scale>. */

:root {
  /* ——— Brand primary (§K.2) ——————————————————————————————— */
  /* Karst Firewall project identity: forest green + fire orange.
     Confirm exact values against official brand guide if available. */
  --brand-primary:        #15803d;   /* forest green */
  --brand-primary-dark:   #14532d;   /* deep forest — sidebar bg, footer bg */
  --brand-primary-light:  #86efac;   /* mint — active item accent */
  --brand-accent:         #ea580c;   /* fire orange — FWI HIGH, CTA */
  --brand-accent-dark:    #9a3412;

  /* Interreg Italia-Slovenia 2021-2027 programme colours (official) */
  --interreg-blue:        #003399;   /* EU flag blue */
  --interreg-yellow:      #ffcc00;   /* EU flag yellow */
  --interreg-ita-green:   #008c45;   /* Italian tricolour green */
  --interreg-ita-red:     #cd212a;

  /* ——— Semantic status colors ——— */
  /* NOTE: gis-palette.css overrides --color-fire-500 with #f97316 (orange
     fire scale) on map/simulation pages. Use --color-danger for red. */
  --color-fire-500:  #dc2626;   /* danger / critical alert (overridden by gis-palette on map pages) */
  --color-danger:    #dc2626;
  --color-warn-500:  #d97706;   /* warning / FWI high */
  --color-ok-500:    #16a34a;   /* success / online / FWI low */
  --color-info-500:  #2563eb;   /* info / focus ring */
  --color-muted:     #6b7280;

  /* ——— Navigation / sidebar — brand green replaces Metronic violet ——— */
  --color-nav-bg:         var(--brand-primary-dark);  /* #14532d forest */
  --color-nav-bg-hover:   #166534;
  --color-nav-active-bg:  #064e3b;
  --color-nav-active-bar: var(--brand-primary-light); /* #86efac mint */
  --color-nav-text:       #f0fdf4;                    /* near-white on green */
  --color-nav-text-muted: rgba(240, 253, 244, 0.55);
  --color-nav-icon:       rgba(240, 253, 244, 0.80);
  --kf-nav-width-expanded: 240px;
  --kf-nav-width-compact:   72px;
  --kf-nav-width:          var(--kf-nav-width-expanded);

  /* ——— Spacing scale (4-pt grid) — same values as in gis-palette.css ——— */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* ——— Border radius ——— */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-pill: 9999px;

  /* ——— Elevation shadows ——— */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ——— Focus ring (WCAG 2.1 AA) ——— */
  --focus-ring: 0 0 0 2px var(--color-info-500);
  --focus-outline: 2px solid var(--color-info-500);
  --focus-outline-offset: 2px;

  /* ——— Typography (§K.3) ——— */
  /* Source Sans 3 loaded from Google Fonts in main.php / login.php.
     Falls back to Inter (already bundled by Metronic) if unavailable. */
  --font-ui:      'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Source Sans 3', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ——— Transition defaults ——— */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
}

/* Compact-mode body class set by kf-nav.js */
body.kf-nav--compact {
  --kf-nav-width: var(--kf-nav-width-compact);
}

/* Hidden / off-canvas (mobile) — JS also adds aria-hidden to aside */
body.kf-nav--hidden {
  --kf-nav-width: 0px;
}