/* =========================================================
   J&F ERP — Design Tokens (Enterprise)
   - Centralized, themeable, scalable
   - Dark mode: html[data-theme="dark"]
   - Light mode: html[data-theme="light"] (default)
========================================================= */

:root {
  color-scheme: light;

  /* Brand */
  --color-accent: #0b2a5b;
  --color-accent-rgb: 11, 42, 91;
  --color-accent-hover: #08224a;
  --color-accent-active: #061c3d;
  --color-accent-contrast: #ffffff;
  --color-danger: #dc3545;
  --color-warning: #f6c343;
  --color-success: #198754;

  /* Surfaces */
  --color-bg: #f5f7fb;
  --color-surface: #ffffff;
  --color-surface-2: #f8fafc;
  --color-surface-elevated: #ffffff;
  --color-surface-hover: #f5f5f5;

  /* Text */
  --color-text-primary: #1b1f24;
  --color-text-secondary: #2c3440;
  --color-text-muted: #4b5563;
  --color-text-disabled: #667085;
  --color-text-inverse: #ffffff;
  --color-placeholder: #667085;

  /* Borders & shadow */
  --color-border: #d7dde7;
  --color-border-strong: #c7ceda;
  --color-focus: #2a7fff;

  --shadow-1: 0 1px 0 #1018280A;

  /* Soft accents (selection states) */
  --color-accent-soft-bg: #e7eaef;
  --color-accent-soft-border: #c9d0db;

  /* Links */
  --color-link-hover: var(--color-accent-hover);

  /* Alerts */
  --color-warning-text: var(--color-text-primary);
  --color-warning-bg: #fdf2d6;
  --color-warning-border: #f3d58a;

  /* Alpha helpers (use tokens instead of color-mix) */
  --color-text-inverse-92: #ffffffeb;
  --color-text-inverse-88: #ffffffe0;
  --color-text-inverse-78: #ffffffc7;
  --color-text-inverse-22: #ffffff38;
  --color-text-inverse-20: #ffffff33;

  /* Accent overlays */
  --color-accent-overlay-92: #0b2a5beb;
  --color-accent-overlay-70: #0b2a5bb3;

  /* Executive (Direction) theme tokens */
  --color-exec-pdg: #78001e;
  --color-exec-vpdg: #003c8c;
  --color-exec-pdg-overlay-92: #78001eeb;
  --color-exec-pdg-overlay-70: #78001eb3;
  --color-exec-vpdg-overlay-92: #003c8ceb;
  --color-exec-vpdg-overlay-70: #003c8cb3;
  --color-exec-pdg-86: #78001edb;
  --color-exec-vpdg-86: #003c8cdb;

  /* KPI borders */
  --color-kpi-border: #52698c;
  --color-kpi-danger-border: #da6776;

  /* Radius */
  --radius-1: 10px;
  --radius-2: 12px;
  --radius-3: 16px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
}

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

html[data-theme="dark"] {
  color-scheme: dark;

  /* Accent: brighten for WCAG on dark surfaces */
  --color-accent: #2a7fff;
  --color-accent-rgb: 42, 127, 255;
  --color-accent-contrast: #0b1220;
  --color-accent-hover: #1f6fe6;
  --color-accent-active: #1a61cc;
  --color-accent-soft-bg: #0c1a33;
  --color-accent-soft-border: #102949;

  --color-bg: #0b1220;
  --color-surface: #0f1b2e;
  --color-surface-2: #12243a;
  --color-surface-elevated: #162b45;
  --color-surface-hover: #1d293a;

  --color-text-primary: #f3f6fb;
  --color-text-secondary: #dbe3f2;
  --color-text-muted: #b8c3d8;
  --color-text-disabled: #93a4c3;
  --color-text-inverse: #0b1220;
  --color-placeholder: #9fb0cc;

  --color-border: #223853;
  --color-border-strong: #2f4a6c;
  --color-focus: #7fb3ff;

  --shadow-1: 0 1px 0 #0000008c;

  /* Alerts */
  --color-warning-text: var(--color-text-primary);
  --color-warning-bg: #424033;
  --color-warning-border: #a18b49;

  /* Accent overlays */
  --color-accent-overlay-92: #2a7fffeb;
  --color-accent-overlay-70: #2a7fffb3;

  /* Executive: shift slightly brighter for dark */
  --color-exec-pdg: #a10a33;
  --color-exec-vpdg: #0a56c2;
  --color-exec-pdg-overlay-92: #a10a33eb;
  --color-exec-pdg-overlay-70: #a10a33b3;
  --color-exec-vpdg-overlay-92: #0a56c2eb;
  --color-exec-vpdg-overlay-70: #0a56c2b3;
  --color-exec-pdg-86: #a10a33db;
  --color-exec-vpdg-86: #0a56c2db;

  /* KPI borders */
  --color-kpi-border: #2766c3;
  --color-kpi-danger-border: #a43649;
}

/* Backward-compatible aliases (avoid breaking existing CSS) */
:root {
  --color-text: var(--color-text-primary);
}