/**
 * HelpStar Core Architecture — Design Tokens File
 */

:root {
    /* --- Core Brand Accents (HelpStar Palette) --- */
    --color-brand-primary: #0F172A;       /* Executive Indigo */
    --color-brand-blue: #0284C7;          /* Clinical Blue */
    --color-brand-blue-hover: #0369A1;    /* Deep Clinical Hover */
    --color-brand-teal: #14B8A6;          /* Medical Accent Teal */
    --color-brand-amber: #F59E0B;         /* Status Gold Alert */

    /* --- Functional Structural Surfaces --- */
    --surface-site-bg: #F8FAFC;           /* Base App Minimal Field Background */
    --surface-card-base: #FFFFFF;         /* Pure White Primary Panels */
    --surface-card-tint: #F1F5F9;         /* Slate Neutral Rows/Sub-panels */
    --surface-footer-bg: #0F172A;         /* Dark Footer Canvas Background */
    --surface-overlay-blur: rgba(255, 255, 255, 0.75); /* High-Trust Glass overlay */
    --border-color-soft: #E2E8F0;         /* Soft Structural Separation Line */

    /* --- High-Contrast Typography Scale --- */
    --text-main-bold: #0F172A;            /* Primary Titles & Captions */
    --text-body-dark: #334155;            /* Standard Readable Copy Fields */
    --text-body-muted: #64748B;           /* Subtitle Specs & Dimmed Meta labels */
    --text-inverse: #FFFFFF;              /* Text overlay for dark solid brand blocks */

    /* --- Modular Typography Fluid Font Sizes --- */
    --font-xs: 0.75rem;     /* 12px Badge labels & small footnotes */
    --font-sm: 0.875rem;    /* 14px Input Labels & Sub-data arrays */
    --font-base: 1rem;      /* 16px Main Standard System Copy text */
    --font-lg: 1.125rem;    /* 18px Inline panel context labels */
    --font-xl: 1.25rem;     /* 20px Feature subheadings & Modal headers */
    --font-2xl: 1.75rem;    /* 28px Core Block Section titles */
    --font-3xl: 2.5rem;     /* 40px Display Subheadings */
    --font-hero: 3.5rem;    /* 56px Hero Landing Display headers */

    /* --- System Dynamic Interaction Timings --- */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.25s ease-in-out;
    --transition-slow: 0.40s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Fully Compliant Clean Dark Theme Overrides Layer --- */
[data-theme="dark"] {
    --color-brand-primary: #F8FAFC;
    --color-brand-blue: #38BDF8;
    --color-brand-blue-hover: #7DD3FC;
    --color-brand-teal: #2DD4BF;
    --color-brand-amber: #FBBF24;

    --surface-site-bg: #0F172A;
    --surface-card-base: #1E293B;
    --surface-card-tint: #334155;
    --surface-footer-bg: #020617;
    --surface-overlay-blur: rgba(15, 23, 42, 0.75);
    --border-color-soft: #334155;

    --text-main-bold: #F8FAFC;
    --text-body-dark: #CBD5E1;
    --text-body-muted: #94A3B8;
    --text-inverse: #FFFFFF;
}