/* FECON ERP design tokens — the single source of truth for colors.
   Loaded before app.css (portal shell) and auth.css (standalone pages).
   Semantic values match the Bootstrap 5.3 palette so custom components
   and Bootstrap components read as one system. */
:root {
  /* Brand */
  --brand: #07396b;        /* FECON primary blue: sidebar, brand headers, PWA theme */
  --brand-strong: #0c416c; /* interactive accent: active nav, hover borders */
  --brand-danger: #7a1f1f; /* destructive-flow brand header (e.g. disable 2FA) */
  --nav: var(--brand);
  --active: var(--brand-strong);

  /* Neutrals */
  --ink: #1f2937;
  --muted: #667085;
  --line: #d8dee6;
  --bg: #f4f6f8;
  --surface: #f9fafb;      /* tinted panels: totals, pills, meta cards */
  --surface-alt: #fafafa;  /* slightly warmer tint: previews, drop zones */

  /* Semantic — success */
  --success: #198754;
  --success-soft: #d1e7dd;
  --success-border: #a3cfbb;
  --success-ink: #0f5132;

  /* Semantic — warning */
  --warning: #ffc107;
  --warning-soft: #fff3cd;
  --warning-border: #ffda6a;
  --warning-ink: #664d03;

  /* Semantic — danger */
  --danger: #dc3545;
  --danger-soft: #f8d7da;
  --danger-border: #f1aeb5;
  --danger-ink: #842029;

  /* Semantic — info */
  --info-soft: #cfe2ff;
  --info-border: #9ec5fe;
  --info-ink: #084298;

  /* Data visualization — mirrors static/portal/charts.js FECON_CHARTS.palette
     exactly (Phase 6 §2). One value, two consumption paths: JS for Chart.js
     instantiation, this custom property for anything else (legend swatches,
     category tags) that would otherwise re-hardcode the hex a third time. */
  --dataviz-1: #0d6efd;
  --dataviz-2: #20c997;
  --dataviz-3: #ffc107;
  --dataviz-4: #fd7e14;
  --dataviz-5: #dc3545;
  --dataviz-6: #6f42c1;
  --dataviz-7: #0f766e;
  --dataviz-8: #6c757d;

  /* Typography scale (Phase 6 §3) — purpose-named, not a pure ratio scale:
     KPI values need maximum size-differentiation to scan fast; table cells
     need maximum size-restraint (10-12 column registers are the norm here). */
  --fs-kpi-value: 1.75rem;     /* 28px, line-height 1.15, weight 700, tabular-nums always */
  --fs-page-title: 1.375rem;   /* 22px, line-height 1.25, weight 600 */
  --fs-section-title: 1.0625rem; /* 17px, line-height 1.3, weight 600 */
  --fs-body: 0.9rem;           /* 14.4px, line-height 1.5, weight 400 */
  --fs-form-label: 0.8125rem;  /* 13px, line-height 1.35, weight 600 */
  --fs-table-header: 0.75rem;  /* 12px, line-height 1.3, weight 700, uppercase, 0.04em tracking */
  --fs-table-cell: 0.8125rem;  /* 13px, line-height 1.35, weight 400, tabular-nums on numeric columns */
  --fs-caption: 0.6875rem;     /* 11px, line-height 1.4 — the floor, never smaller */

  /* Spacing scale (Phase 6 §4) — 8px base. Table <td>/<th> horizontal padding
     is explicitly permitted to use --space-1/--space-2 even where the rest of
     a page uses the 16/24/32 rhythm (the one named, documented exception). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Elevation (Phase 6 §5) — 3 tiers, deliberately restrained; tinted toward
     --ink's navy-black rather than pure rgba(0,0,0,…). */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 1px rgba(15, 23, 42, .04);
  --shadow-2: 0 4px 10px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-3: 0 12px 28px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .08);

  /* Motion (Phase 13.5 — FRONTEND_ARCHITECTURE_PHASE11 §6 proposed these;
     first landed here). Framer Motion's shared variants (frontend/src/lib/
     motion) read these instead of each component picking its own timing. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-ease: cubic-bezier(0.4, 0, 0.2, 1);
}