/* ============================================================
   eCAP Design Tokens
   ------------------------------------------------------------
   Single source of truth for every color value in the app.
   All other CSS must reference these via `var(--ecap-color-*)`.
   Raw hex values outside this file are a smell — flag them in
   review.

   Naming: --ecap-color-{scale}-{step}
     - scale = brand, gray, coolgray, blue, green, amber,
               orange, red, purple, cyan, indigo
     - step  = 50–950 (Tailwind-style luminance scale)

   Brand tokens (--ecap-color-brand-*) carry semantic intent and
   ride on top of the scale.
   ============================================================ */

:root {
    /* ---------- Brand ----------
       The three identity colours that define EWOSA at a glance. */
    --ecap-color-brand-primary: #00884B;   /* EWOSA green — primary CTA, focus ring, active states */
    --ecap-color-brand-admin:   #104C95;   /* Admin role — avatars, role pills */
    --ecap-color-brand-officer: #E77825;   /* Officer role — avatars, role pills */

    /* ---------- Neutrals ----------
       Tailwind-style neutral scale. Body text, surfaces, borders, dividers. */
    --ecap-color-white:    #ffffff;
    --ecap-color-black:    #000000;
    --ecap-color-gray-50:  #fafafa;        /* page background */
    --ecap-color-gray-100: #f5f5f5;        /* panel / chip backgrounds */
    --ecap-color-gray-200: #e5e5e5;        /* card borders */
    --ecap-color-gray-300: #d4d4d4;        /* secondary borders, separator dots */
    --ecap-color-gray-400: #a3a3a3;        /* placeholder text */
    --ecap-color-gray-500: #737373;        /* secondary text (AA on white) */
    --ecap-color-gray-550: #5f5f5f;        /* high-contrast secondary (6.7:1 on white) */
    --ecap-color-gray-600: #525252;        /* body text */
    --ecap-color-gray-800: #262626;
    --ecap-color-gray-900: #171717;        /* primary text */
    --ecap-color-gray-950: #1a1a1a;

    /* MUI/Tailwind "cool gray" — distinct from neutral above. */
    --ecap-color-coolgray-300: #d1d5db;
    --ecap-color-coolgray-400: #e0e0e0;

    /* ---------- Blue — Open / Info / Escalated Referral ---------- */
    --ecap-color-blue-50:  #dbeafe;
    --ecap-color-blue-200: #bfdbfe;
    --ecap-color-blue-400: #60a5fa;
    --ecap-color-blue-600: #2563eb;
    --ecap-color-blue-700: #1e40af;

    /* ---------- Green — Closed / Resolved / Success ---------- */
    --ecap-color-green-50:  #f0fdf4;
    --ecap-color-green-100: #dcfce7;
    --ecap-color-green-200: #bbf7d0;
    --ecap-color-green-300: #86efac;
    --ecap-color-green-400: #4ade80;
    --ecap-color-green-500: #16a34a;
    --ecap-color-green-600: #15803d;
    --ecap-color-green-700: #166534;

    /* ---------- Amber — Submitted / Pending / Warning ---------- */
    --ecap-color-amber-50:  #fffbeb;
    --ecap-color-amber-100: #fef9c3;
    --ecap-color-amber-200: #fef3c7;
    --ecap-color-amber-300: #fde68a;
    --ecap-color-amber-400: #fcd34d;
    --ecap-color-amber-500: #facc15;
    --ecap-color-amber-600: #f59e0b;
    --ecap-color-amber-700: #ca8a04;
    --ecap-color-amber-800: #a16207;
    --ecap-color-amber-900: #854d0e;
    /* Tailwind's amber-600 slot (#d97706) — distinct from our existing
       --ecap-color-amber-600 (#f59e0b). Used for the "critical / dueToday"
       SLA urgency tier per EWOSA-XX ticket spec. */
    --ecap-color-amber-critical: #d97706;

    /* ---------- Orange — High Priority / Gas / Assign activity ---------- */
    --ecap-color-orange-100: #ffedd5;
    --ecap-color-orange-200: #fed7aa;
    --ecap-color-orange-400: #fb923c;
    --ecap-color-orange-600: #ea580c;
    --ecap-color-orange-700: #9a3412;
    --ecap-color-orange-900: #92400e;

    /* ---------- Red — Rejected / Error / Critical / Overdue ---------- */
    --ecap-color-red-50:  #fde2e2;
    --ecap-color-red-100: #fee2e2;
    --ecap-color-red-200: #fecaca;
    --ecap-color-red-400: #f87171;
    --ecap-color-red-600: #dc2626;
    --ecap-color-red-700: #991b1b;

    /* ---------- Purple — Upgraded / Upload activity ---------- */
    --ecap-color-purple-100: #f3e8ff;
    --ecap-color-purple-200: #e9d5ff;
    --ecap-color-purple-400: #c084fc;
    --ecap-color-purple-600: #9333ea;
    --ecap-color-purple-700: #7c3aed;
    --ecap-color-purple-800: #6b21a8;

    /* ---------- Cyan — Water utility ---------- */
    --ecap-color-cyan-50:  #cffafe;
    --ecap-color-cyan-400: #22d3ee;
    --ecap-color-cyan-700: #155e75;

    /* ---------- Indigo — Decorative gradients ---------- */
    --ecap-color-indigo-50:  #edf1fd;
    --ecap-color-indigo-100: #f5f7ff;
    --ecap-color-indigo-700: #2a47b8;

    /* ============================================================
       Spacing scale (8px base, off-grid steps for tight chrome).
       Naming follows Tailwind/MUI familiarity: 0..10 doubling-ish.
       Use these instead of pixel literals in padding/margin/gap.
       ============================================================ */
    --ecap-space-0:  0;
    --ecap-space-px: 1px;
    --ecap-space-1:  2px;
    --ecap-space-2:  4px;
    --ecap-space-3:  6px;
    --ecap-space-4:  8px;
    --ecap-space-5:  10px;
    --ecap-space-6:  12px;
    --ecap-space-7:  14px;
    --ecap-space-8:  16px;
    --ecap-space-9:  20px;
    --ecap-space-10: 24px;
    --ecap-space-11: 32px;
    --ecap-space-12: 40px;
    --ecap-space-13: 48px;
    --ecap-space-14: 64px;

    /* ============================================================
       Border radius scale.
       ============================================================ */
    --ecap-radius-sm:   4px;   /* form validation outline, small surfaces */
    --ecap-radius-base: 6px;   /* compact pills */
    --ecap-radius-md:   8px;   /* buttons, inputs, tab tops */
    --ecap-radius-lg:   12px;  /* cards, panels, mobile sheet handle */
    --ecap-radius-xl:   16px;  /* mobile bottom sheets */
    --ecap-radius-2xl:  24px;
    --ecap-radius-pill: 999px; /* chips, role pills, slim-bar back btn */

    /* ============================================================
       Typography scale (rem-based so user font-size scaling works).
       --ecap-text-base = 14px = MudBlazor's body default.
       ============================================================ */
    --ecap-text-2xs:  0.6875rem;  /* 11px — uppercase eyebrows, badges */
    --ecap-text-xs:   0.75rem;    /* 12px — captions, dense meta */
    --ecap-text-sm:   0.8125rem;  /* 13px — secondary body, table cells */
    --ecap-text-base: 0.875rem;   /* 14px — body */
    --ecap-text-md:   0.9375rem;  /* 15px — emphasized body */
    --ecap-text-lg:   1rem;       /* 16px — section heading */
    --ecap-text-xl:   1.05rem;    /* 17px — report row title */
    --ecap-text-2xl:  1.125rem;   /* 18px — refresh button icon */
    --ecap-text-3xl:  1.25rem;    /* 20px */
    --ecap-text-4xl:  1.375rem;   /* 22px — mobile-tab icon */
    --ecap-text-5xl:  1.5rem;     /* 24px — mobile KPI count */
    --ecap-text-hero: 3rem;       /* 48px — KPI hero number */

    /* ============================================================
       Font weight scale.
       ============================================================ */
    --ecap-fw-regular:  400;
    --ecap-fw-medium:   500;
    --ecap-fw-semibold: 600;
    --ecap-fw-bold:     700;

    /* ============================================================
       Elevation / shadow scale.
       --ecap-shadow-sticky is used by the slim sticky bar + mobile tabs;
       --ecap-shadow-card is the standard surface shadow.
       ============================================================ */
    --ecap-shadow-xs:     0 1px 3px rgb(0 0 0 / 0.06);
    --ecap-shadow-sm:     0 2px 6px rgb(0 0 0 / 0.04);
    --ecap-shadow-card:   0 2px 8px rgb(0 0 0 / 0.06);
    --ecap-shadow-md:     0 4px 12px rgb(0 0 0 / 0.06);
    --ecap-shadow-lg:     0 6px 18px rgb(0 0 0 / 0.06);
    --ecap-shadow-xl:     0 8px 24px rgb(0 0 0 / 0.08);
    --ecap-shadow-sticky: 0 4px 14px rgb(0 0 0 / 0.05);
    --ecap-shadow-tabbar: 0 -2px 8px rgb(0 0 0 / 0.04);

    /* ============================================================
       Transitions.
       ============================================================ */
    --ecap-transition-fast:    120ms ease;
    --ecap-transition-base:    160ms ease;
    --ecap-transition-slow:    220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}