/*============================
 Global CSS Custom Properties (Design Tokens)
 Shared across all pages — login, dashboard, and all app screens.
==============================*/

:root {
    /* ── Brand Core Teal - Navy ── */
    --brand-teal:           #14B8A6;   /* Teal — main brand color */
    --brand-navy:           #0D1B2A;   /* Dark navy — main brand color */
    --brand-teal-light:     #1ACEBB;   /* Light teal — hover states, gradients (teal family) */
    --brand-teal-deep:      #0A7A72;   /* Deep teal — gradient pairs (teal family) */
    --brand-teal-hover:     #0F9B8C;   /* Mid-dark teal — link hover states (teal family) */
    --brand-navy-dark:      #021E2D;   /* Near-black navy — dark sections (navy family) */ 

    /* ── Brand Core ── */
    --brand-primary:        #1e3a8a;   /* Main blue — buttons, accents, headings */
    --brand-secondary:      #3b82f6;   /* Lighter blue — gradients, secondary accents */
    --brand-accent:         #2563eb;   /* Medium blue — hover states, gradients */
    --brand-deep:           #1d4ed8;   /* Deep blue — gradient pairs */
    --brand-darkest:        #172554;   /* Near-black blue — dark sections, mockup nav */
    --brand-hover:          #1e40af;   /* Hover blue — link hover states */

    /* ── Brand Glow (rgba shadows/glows) ── */
    --brand-glow-xs:        rgba(30, 58, 138, 0.04);
    --brand-glow-sm:        rgba(30, 58, 138, 0.08);
    --brand-glow-md:        rgba(30, 58, 138, 0.15);
    --brand-glow-lg:        rgba(30, 58, 138, 0.25);
    --brand-glow-xl:        rgba(30, 58, 138, 0.35);
    --brand-glow-2xl:       rgba(30, 58, 138, 0.45);
    --brand-glow-3xl:       rgba(30, 58, 138, 0.50);

    /* ── Teal Glow (rgba shadows/glows — teal family, based on --brand-teal #14B8A6) ── */
    --teal-glow-xs:         rgba(20, 184, 166, 0.04);
    --teal-glow-sm:         rgba(20, 184, 166, 0.08);
    --teal-glow-md:         rgba(20, 184, 166, 0.15);
    --teal-glow-lg:         rgba(20, 184, 166, 0.25);
    --teal-glow-xl:         rgba(20, 184, 166, 0.35);
    --teal-glow-2xl:        rgba(20, 184, 166, 0.45);
    --teal-glow-3xl:        rgba(20, 184, 166, 0.50);

    /* ── Accent ── */
    --accent-green:         #6ee7b7;   /* Emerald green — highlight text in dark sections */

    /* ── Text Hierarchy 14B8A6 */
    --text-dark:            #0f172a;   /* Headings, near-black */
    --text-primary:         #0c1f3d;   /* Deep navy body text */
    --text-secondary:       #475569;   /* Sub-headings, descriptions */
    --text-body:            #374151;   /* Feature/content body text */
    --text-muted:           #64748b;   /* Secondary labels */
    --text-slate:           #334155;   /* Slate-toned labels */
    --text-subtle:          #94a3b8;   /* Placeholder, faint text */
    --text-faint:           #9ca3af;   /* Captions, source text */
    --text-dm-link:         #7ba8c4;   /* Dashboard mockup nav links */
    --text-dm-name:         #9bbfd8;   /* Dashboard mockup nav name */

    /* ── Backgrounds ── */
    --white:                #ffffff;
    --bg-light:             #f0f9ff;   /* Main page background */
    --bg-blue-lt:           #eff6ff;   /* Blue-tinted section bg */
    --bg-subtle:            #f8fafc;   /* Subtle near-white section bg */
    --bg-gray:              #f1f5f9;   /* Search bars, input backgrounds */
    --bg-card:              #ffffff;
    --bg-navy-surface: #202D3B;



    /* ── Blue Tint Scale ── */
    --blue-tint:            #dbeafe;   /* Badge/pill/tag backgrounds, icon bgs */
    --blue-tint-lt:         #bfdbfe;   /* Hover borders, light accents */
    --blue-border:          #c7d9f8;   /* FAQ item borders */

    /* ── Login Bar Gradient ── */
    --login-bar-start:      #ecfdf5;
    --login-bar-mid:        #eff6ff;
    --login-bar-end:        #e0f2fe;
    --login-bar-border:     #bbf7d0;

    /* ── FAQ Section Gradient ── */
    --faq-bg-start:         #e8f0fe;
    --faq-bg-mid:           #eef4ff;
    --faq-bg-end:           #f4f7ff;

    /* ── Status / Semantic ── */
    --status-critical:      #ef4444;
    --status-critical-bg:   #fee2e2;
    --status-critical-bdr:  #fca5a5;
    --status-abnormal:      #7c3aed;
    --status-abnormal-bg:   #ede9fe;
    --status-abnormal-bdr:  #c4b5fd;
    --status-normal:        #10b981;
    --status-normal-bg:     #d1fae5;
    --status-normal-bdr:    #6ee7b7;
    --error-bg:             #fef2f2;
    --error-border:         #fecaca;
    --error-text:           #dc2626;

    /* ── White Alpha ── */
    --white-08:              rgba(255, 255, 255, 0.08);

    /* ── Borders ── */
    --border:               #e2e8f0;

    /* ── Shadows ── */
    --shadow-sm:    0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:    0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
    --shadow-lg:    0 20px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
}