/* ============================================================================
   Design Tokens — Single source of truth for all visual values.

   Every hardcoded colour in the project is represented here.
   Changing a token value changes it everywhere.
   The default (:root) values match the current light-mode appearance exactly.
   ============================================================================ */

:root {
    /* ── Brand / Primary (Auger Green) — Spark primitives ────────────────── */
    --token-brand:              #8CC640; /* primary-color */
    --token-brand-hover:        #5a9216; /* primary-dark */
    --token-brand-dark:         #5a9216; /* primary-dark */
    --token-on-brand:           #00333B; /* text on flat brand green, both themes */
    --token-brand-light:        #e8f5e9; /* primary-light — subtle bg */
    --token-brand-lighter:      #9dd654; /* primary-lighter */
    --token-brand-rgb:          140, 198, 64;

    /* Accent (Auger Purple) — Spark secondary, used for links, focus, highlights */
    --token-accent:             #8950FC; /* secondary-color */
    --token-accent-hover:       #4a148c; /* secondary-dark */
    --token-accent-dark:        #4a148c; /* secondary-dark */
    --token-accent-light:       #f3e5f5; /* secondary-light — subtle bg */
    --token-accent-rgb:         137, 80, 252;

    /* ── Success / Green ─────────────────────────────────────────────────── */
    --token-success:            #28a745;
    --token-success-hover:      #1e7e34;
    --token-success-dark:       #155724;
    --token-success-icon:       #22c55e;
    --token-success-light-bg:   #ecfdf5;
    --token-success-light-text: #166534;
    --token-success-border:     #86efac;
    --token-success-border-light:#bbf7d0;
    --token-success-badge-bg:   #dcfce7;
    --token-success-alert-bg:   #d4edda;
    --token-success-alert-border:#c3e6cb;
    --token-success-rgb:        40, 167, 69;

    /* ── Warning / Orange (Spark-aligned, not yellow) ────────────────────── */
    --token-warning:            #d97706;
    --token-warning-bg:         #fed7aa;
    --token-warning-text:       #7c2d12;
    --token-warning-border:     #fdba74;
    --token-warning-light-bg:   #fff7ed;
    --token-warning-dark-bg:    #ffedd5;
    --token-warning-dark-border:#fed7aa;
    --token-warning-dark-text:  #9a3412;
    --token-warning-rgb:        217, 119, 6;

    /* ── Danger / Red ────────────────────────────────────────────────────── */
    --token-danger:             #dc3545;
    --token-danger-hover:       #b91c1c;
    --token-danger-dark:        #bb2d3b;
    --token-danger-text:        #721c24;
    --token-danger-bg:          #f8d7da;
    --token-danger-border:      #f5c6cb;
    --token-danger-light-bg:    #fef2f2;
    --token-danger-light-border:#fca5a5;
    --token-danger-light-border-alt:#fecaca;

    /* ── Info (Auger secondary purple — no blue in palette) ──────────────── */
    --token-info:               #8950FC;
    --token-info-hover:         #4a148c;
    --token-info-bg:            #f3e5f5;
    --token-info-text:          #4a148c;
    --token-info-border:        #d4bcff;
    --token-info-light-bg:      #ede7fb;
    --token-info-alt-bg:        #f3e5f5;
    --token-info-alt-text:      #4a148c;
    --token-info-alt-border:    #d4bcff;

    /* ── Neutral / Grey Scale ────────────────────────────────────────────── */
    --token-text:               #212529;
    --token-text-secondary:     #333;
    --token-text-muted:         #666;
    --token-text-light:         #6c757d;
    --token-text-lighter:       #475569;
    --token-text-label:         #64748b;
    --token-text-faint:         #94a3b8;
    --token-text-input:         #495057;
    --token-text-dark:          #374151;
    --token-text-heading:       #1a202c;
    --token-text-subtle:        #555;
    --token-text-dim:           #888;

    /* ── Backgrounds ─────────────────────────────────────────────────────── */
    --token-bg-page:            #f5f7fa;
    --token-bg-light:           #f8f9fa;
    --token-bg-lighter:         #f1f5f9;
    --token-bg-card-header:     #fafbfc;
    --token-bg-muted:           #e9ecef;
    --token-bg-input:           #f9fafb;

    --token-surface:            #fff;

    /* ── Borders ─────────────────────────────────────────────────────────── */
    --token-border:             #dee2e6;
    --token-border-light:       #e2e8f0;
    --token-border-lighter:     #eef1f4;
    --token-border-input:       #e6eaee;
    --token-border-medium:      #d1d5db;
    --token-border-focus:       rgba(140, 198, 64, .25); /* brand green alpha */

    /* ── Icons ───────────────────────────────────────────────────────────── */
    --token-icon-muted:         #cbd5e1;
    --token-icon-faint:         #ccc;

    /* ── Shadows ─────────────────────────────────────────────────────────── */
    --token-shadow-sm:          0 1px 3px rgba(0, 0, 0, .08);
    --token-shadow:             0 2px 6px rgba(0, 0, 0, .08);
    --token-shadow-md:          0 2px 8px rgba(0, 0, 0, .08);
    --token-shadow-lg:          0 20px 40px rgba(0, 0, 0, .1);
    --token-shadow-card:        0 4px 12px rgba(0, 0, 0, .1);

    /* ── Border Radius ───────────────────────────────────────────────────── */
    --token-radius-sm:          4px;
    --token-radius:             6px;
    --token-radius-md:          8px;
    --token-radius-lg:          10px;
    --token-radius-xl:          12px;
    --token-radius-pill:        999px;
    --token-radius-card:        16px;

    /* ── Typography ──────────────────────────────────────────────────────── */
    --token-font-family:        'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    /* ── Spacing ─────────────────────────────────────────────────────────── */
    --token-space-base:         1rem;

    /* ── Transitions ─────────────────────────────────────────────────────── */
    --token-transition-fast:    .2s ease;
    --token-transition:         .3s ease;

    /* ── Gradients ───────────────────────────────────────────────────────── */
    --token-gradient-brand:     linear-gradient(135deg, #8CC640, #5a9216);
    --token-gradient-brand-hover:linear-gradient(135deg, #7ab230, #4a7e12);
    --token-gradient-success:   linear-gradient(135deg, #28a745, #1e7e34);
    --token-gradient-success-hover:linear-gradient(135deg, #1e7e34, #155724);
    --token-gradient-accent:    linear-gradient(135deg, #8950FC, #6d3fd4);
    --token-gradient-accent-hover:linear-gradient(135deg, #6d3fd4, #4a148c);
    --token-gradient-hero:      linear-gradient(135deg, #e8f5e9 0%, #f3e5f5 100%);
    --token-gradient-progress:  linear-gradient(90deg, #8CC640, #9dd654);
    --token-gradient-danger:    linear-gradient(135deg, #ef4444, #dc2626);
    --token-gradient-danger-hover:linear-gradient(135deg, #dc2626, #b91c1c);

    /* ── Scrollbar ───────────────────────────────────────────────────────── */
    --token-scrollbar-track:    #f1f1f1;
    --token-scrollbar-thumb:    #c1c1c1;

    /* ── Provider brand colours (fixed — never change in dark mode) ─────── */
    --token-provider-microsoft: #0078D4;
    --token-provider-microsoft-hover:#106EBE;
    --token-provider-google:    #dc3545;
    --token-provider-google-hover:#bb2d3b;
    --token-provider-apple:     #000;
    --token-provider-apple-hover:#333;
    --token-provider-facebook:  #1877f2;
    --token-provider-facebook-hover:#166fe0;

    /* ── Misc / app.css legacy (re-pointed at Auger palette) ─────────────── */
    --token-link:               #8950FC; /* secondary */
    --token-focus-ring:         #8CC640; /* primary */
    --token-valid-outline:      #8CC640; /* primary */
    --token-invalid-outline:    #dc2626;

    /* ── Extended palette ───────────────────────────────────────────────── */
    --token-emerald:             #8CC640; /* alias to primary for brand consistency */
    --token-emerald-hover:       #5a9216;
    --token-sky:                 #9dd654; /* alias to primary-lighter */
    --token-sky-hover:           #8CC640;

    /* ── Auger design palette (matches Customer Portal Styling spec) ───── */
    --auger-navy:                #00333B; /* deep brand navy for stage banners, dark cards */
    --auger-page-bg-warm:        #EDEEEC; /* warm grey page bg used on Messages */
}