/* Estimate Flow — brand color tokens */
/* Single source of truth for all colors used by admin + customer portal.
 *
 * v3.22.0 — REPOINTED to the canonical SWG SaaS Design System
 * (docs/swg-saas-design-system.md). Estimate Flow is a SaaS-style
 * application (admin console + customer portal + CRM-like reporting), so
 * per the agency SaaS exception it adopts the SaaS palette (#2563EB
 * primary) instead of the marketing-brand electric blue (#38A8D8). The
 * electric-blue marketing accent is retained for email templates only,
 * which use hardcoded hex inline styles per Email_Template::COLOR_*
 * (email clients strip external CSS — that exception predates v3.22.0).
 *
 * Design philosophy: modern, professional, organized, premium, easy to
 * navigate, fast, consistent. Inspiration: ClickUp / Linear / Asana /
 * HubSpot / Harvest / Notion / Monday.com. Calm surfaces, one clear
 * primary color, white cards on a soft gray canvas, functional icons,
 * never more than one thing competing for attention.
 *
 * WCAG-AA discipline:
 *  - Bright "500-level" accents (#22C55E green / #F59E0B amber /
 *    #06B6D4 cyan / #8B5CF6 purple / #EC4899 pink) are DECORATION ONLY
 *    — icon-container fills, status dots, progress bars. NEVER body text.
 *  - For colored TEXT, use the *-dark variant (success-dark #15803D,
 *    warning-dark #B45309, etc.) which passes AA on white.
 *  - #2563EB primary passes AA on white (5.17:1) for text OR fill.
 *  - White on #2563EB is safe (5.17:1); white on #22C55E / #F59E0B is NOT
 *    (~1.7-1.9:1) — never put white text on those.
 */

:root {
    /* Surfaces */
    --swg-bg:            #ffffff;  /* Card / panel background */
    --swg-canvas:        #f8fafc;  /* Page background (NEW v3.22.0) */
    --swg-surface:       #f8fafc;  /* Soft inset surfaces + row hover */
    --swg-surface-hover: #eef2f7;  /* Hover state on surfaces */
    --swg-line:          #e2e8f0;  /* Borders / dividers */

    /* Text */
    --swg-text:          #0f172a;  /* Headings + metric values (was #1d2327) */
    --swg-body:          #334155;  /* Body copy (NEW v3.22.0) */
    --swg-muted:         #64748b;  /* Helper / captions / field labels */

    /* Primary accent — SaaS cobalt */
    --swg-accent:        #2563eb;  /* Primary buttons, links, active nav (was #38A8D8) */
    --swg-accent-soft:   #eff6ff;  /* Soft tint — active nav, hover fills (was rgba(56,168,216,0.12)) */
    --swg-accent-dark:   #1d4ed8;  /* Hover state, ALL text use (was #1d6588) */

    /* Status colors — DECORATION variants */
    --swg-success:       #22c55e;  /* Decoration only — fills, dots */
    --swg-success-soft:  #ecfdf5;  /* Soft tint — backgrounds */
    --swg-success-dark:  #15803d;  /* TEXT variant (passes AA, NEW v3.22.0) */
    --swg-error:         #ef4444;  /* Decoration only — icon, fills */
    --swg-error-soft:    #fef2f2;  /* Soft tint — backgrounds */
    --swg-error-dark:    #dc2626;  /* TEXT variant (passes AA, NEW v3.22.0) */
    --swg-error-darker:  #b91c1c;  /* Darker TEXT variant — clears AA (~5.9:1) on --swg-error-soft where --swg-error-dark is 4.41:1 (NEW v3.25.6) */
    --swg-warning:       #f59e0b;  /* Decoration only — fills */
    --swg-warning-soft:  #fff7ed;  /* Soft tint — backgrounds */
    --swg-warning-dark:  #b45309;  /* TEXT variant (passes AA, NEW v3.22.0) */

    /* Stat-card accent hues — ONE per metric, DECORATION ONLY on icon containers */
    --swg-c-blue:        #2563eb;  /* Same as accent — used for blue stat cards */
    --swg-c-blue-soft:   #eff6ff;
    --swg-c-green:       #22c55e;
    --swg-c-green-soft:  #ecfdf5;
    --swg-c-purple:      #8b5cf6;  /* Decoration only — too light for text on -soft */
    --swg-c-purple-soft: #f5f3ff;
    --swg-c-purple-dark: #6d28d9;  /* TEXT variant (passes AA on --swg-c-purple-soft, NEW v3.55.2) */
    --swg-c-amber:       #f59e0b;
    --swg-c-amber-soft:  #fff7ed;

    /* v3.64.0 — STATUS MODEL 2.0 needs YELLOW and ORANGE as two DISTINCT hues:
       "Submitted" is yellow, "Action required from Client" is orange, and a
       client has to tell them apart at a glance. The existing --swg-warning
       family is a single amber that was serving both, which is exactly why the
       old Pending Review and Waiting on Customer pills looked identical.
       Both TEXT variants clear WCAG AA on their own soft tint (~6.4:1). */
    --swg-c-orange:      #f97316;  /* Decoration only — KPI icon chips, bar fills */

    /* v3.64.1 — THE HUE HAS TO LIVE IN THE FILL, NOT THE TEXT.
       v3.64.0 shipped these as near-white fills (#fef9c3 / #ffedd5) with very
       dark text, chosen to maximise contrast. It backfired: on a pill that pale,
       the eye reads the TEXT as the colour, and dark yellow is brown while dark
       orange is maroon. The client reported exactly that — "Submitted is not
       yellow, it's brown; Action required from Client is not Orange, it is
       Maroon" — while calling blue, red and green fine, because a dark blue
       still reads blue. Saturating the fill fixes it and actually IMPROVES
       contrast. Verified: #422006 on #fde047 = 11.1:1, #7c2d12 on #fdba74 =
       5.6:1, both clear WCAG AA (4.5:1). */
    --swg-c-yellow-soft: #fde047;  /* Submitted — fill carries the yellow */
    --swg-c-yellow-dark: #422006;  /* Submitted — TEXT, 11.1:1 on the fill */
    --swg-c-orange-soft: #fdba74;  /* Action required from Client — fill carries the orange */
    --swg-c-orange-dark: #7c2d12;  /* Action required from Client — TEXT, 5.6:1 on the fill */
    --swg-c-cyan:        #06b6d4;
    --swg-c-cyan-soft:   #ecfeff;
    --swg-c-pink:        #ec4899;
    --swg-c-pink-soft:   #fdf2f8;

    /* Connection badge variants (integration cards, status pills) */
    --swg-badge-on-bg:   #dcfce7;
    --swg-badge-on-tx:   #15803d;
    --swg-badge-off-bg:  #fee2e2;
    --swg-badge-off-tx:  #dc2626;

    /* Spacing — 8/16/24 scale preserved */
    --swg-space-sm:      8px;
    --swg-space:         16px;
    --swg-space-lg:      24px;
    --swg-space-xl:      32px;  /* NEW v3.22.0 — for section gaps */

    /* Radius — bumped up for SaaS feel */
    --swg-radius-sm:     6px;    /* NEW v3.22.0 — small chips, pills */
    --swg-radius:        8px;    /* Was 4px — buttons, inputs */
    --swg-radius-lg:     12px;   /* Was 8px — cards */
    --swg-radius-xl:     18px;   /* NEW v3.22.0 — framed container, big cards */

    /* Shadows — soft SaaS depth (replaced) */
    --swg-shadow-sm:     0 1px 2px rgba(15, 23, 42, 0.04);
    --swg-shadow:        0 4px 12px rgba(15, 23, 42, 0.06);
    --swg-shadow-lg:     0 10px 30px rgba(15, 23, 42, 0.08);
    --swg-shadow-xl:     0 18px 45px rgba(15, 23, 42, 0.08);  /* Framed container */

    /* Focus ring — for keyboard a11y */
    --swg-focus-ring:    0 0 0 3px rgba(37, 99, 235, 0.18);  /* NEW v3.22.0 */

    /* Typography — Inter as primary, falls back to system stack */
    --swg-font:          'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;  /* NEW v3.22.0 */

    /* Touch targets */
    --swg-touch-target:  44px;
}