/* ============================================================================
   WUMS — Design Tokens (single source of truth)
   Water Utility Management System · Municipal Waterworks System — LGU Lila
   ----------------------------------------------------------------------------
   Reference these custom properties from every component. Do NOT hardcode hex
   values in components or views. Status text colors are contrast-verified to
   meet WCAG AA (>=4.5:1); the mockup's #16A34A / #F59E0B are intentionally NOT
   used as text (they fail AA). See WUMS-ClaudeCode-Design-Implementation.md §2.
   ========================================================================== */
:root{
  /* ---- Brand ---- */
  --color-primary:        #0D6EFD; /* text-safe 4.50:1 — primary actions, active nav, links */
  --color-primary-hover:  #0B5ED7;
  --color-primary-active: #0A53BE;
  --color-accent:         #0097A7; /* FILL/ACCENT ONLY (3.51:1) — borders, active fills, NOT body text */
  --color-secondary:      #26A65B; /* FILL/ACCENT ONLY (3.14:1) — decorative emphasis, NOT text */

  /* ---- Status (all text-safe, >=4.5:1) ---- */
  --color-success: #15803D; /* Paid              (5.02:1) — corrected from #16A34A */
  --color-warning: #B45309; /* Overdue / Arrears (5.02:1) — corrected from #F59E0B */
  --color-danger:  #DC2626; /* For Disconnection (4.83:1) */
  --color-info:    #0E7490; /* Pending / Notice  (5.36:1) — cyan, distinct from primary blue */
  --color-notice:  #7C3AED; /* General notice    (5.70:1) */

  /* ---- Status tints (light badge backgrounds; always pair with matching dark text token) ---- */
  --color-success-bg: #DCFCE7;
  --color-warning-bg: #FEF3C7;
  --color-danger-bg:  #FEE2E2;
  --color-info-bg:    #CFFAFE;
  --color-notice-bg:  #EDE9FE;

  /* ---- Neutrals ---- */
  --color-n-50:  #FAFBFC;
  --color-n-100: #F1F3F5;
  --color-n-200: #E5E7EB;
  --color-n-300: #D1D5DB;
  --color-n-400: #9CA3AF;
  --color-n-500: #6B7280;
  --color-n-600: #4B5563;
  --color-n-700: #374151;
  --color-n-800: #1F2937;
  --color-n-900: #111827;

  /* ---- Semantic surfaces & text ---- */
  --color-canvas:      var(--color-n-50);  /* app background */
  --color-surface:     #FFFFFF;            /* cards, tables, panels */
  --color-border:      var(--color-n-200);
  --color-text:        var(--color-n-900); /* body text */
  --color-text-muted:  var(--color-n-500);
  --color-text-invert: #FFFFFF;

  /* ---- Sidebar (deep navy from mockup) ---- */
  --color-sidebar-bg:        #0B2447;
  --color-sidebar-text:      #C7D2E0;
  --color-sidebar-active-bg: #0D6EFD;
  --color-sidebar-active-tx: #FFFFFF;

  /* ---- Focus ring (accessibility) ---- */
  --focus-ring: 0 0 0 3px rgba(13,110,253,0.40);

  /* ---- Radius / elevation ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(16,24,40,0.06), 0 1px 3px rgba(16,24,40,0.10);

  /* ---- Typography ---- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Consolas, monospace;

  /* ============================================================================
     Legacy aliases — map the prototype's old variable names onto WUMS tokens so
     existing inline styles in public/views/*.js keep working without edits.
     Prefer the --color-* tokens above for any new work.
     ========================================================================== */
  --ink:    var(--color-text);
  --ink-2:  var(--color-n-600);
  --ink-3:  var(--color-n-500);
  --paper:  var(--color-canvas);
  --card:   var(--color-surface);
  --line:   var(--color-border);
  --line-2: var(--color-n-100);
  --deep:   var(--color-sidebar-bg);
  --deep-2: #123a6b;
  --aqua:      var(--color-primary);
  --aqua-soft: #E7F0FF;
  --amber:      var(--color-warning);
  --amber-soft: var(--color-warning-bg);
  --green:      var(--color-success);
  --green-soft: var(--color-success-bg);
  --red:    var(--color-danger);
  --mono:   var(--font-mono);
  --sans:   var(--font-sans);
  --shadow: var(--shadow-card);
  --rail:   240px;
}