/* variables.css - Design Tokens & Theme Variables */
:root {
    /* Primary / Emerald Palette (Brand Accent) */
    --primary: #00875A;
    --primary-hover: #00704A;
    --primary-light: #D1F2E2;
    --primary-rgb: 0, 135, 90;
    --on-primary-container: #003823;

    /* Navy Scale (Structural / Neutral Base) — FEAT-UI-41 */
    --navy-900: #0F1B35;
    --navy-800: #172642;
    --navy-700: #243653;
    --navy-600: #3B4A64;
    --navy-500: #647189;
    --navy-200: #D9E0E8;
    --navy-100: #E9EDF2;
    --navy-50:  #F5F7F9;

    /* Secondary / Slate Palette */
    --secondary: #1E293B;
    --secondary-container: #E2E8F0;
    --on-secondary-container: #0F172A;

    /* Tertiary / Indigo Palette (Metrics, Highlights, Quick Actions) */
    --tertiary: #4F46E5;
    --tertiary-container: #EEF2FF;
    --on-tertiary-container: #312E81;

    /* Surface & Background */
    --background: #F8FAFC;
    --surface: #FFFFFF;

    /* Typography / Neutral */
    --text-primary: var(--navy-900);
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --border: #E2E8F0;

    /* Typography Scale Tokens */
    --font-size-xs: 0.75rem;     /* 12px */
    --font-size-sm: 0.875rem;    /* 14px */
    --font-size-base: 1rem;      /* 16px */
    --font-size-lg: 1.125rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 1.875rem;   /* 30px */

    /* Semantic Status Roles */
    --success: #10B981;
    --success-container: #ECFDF5;
    --success-text: #065F46;

    --warning: #F59E0B;
    --warning-container: #FFFBEB;
    --warning-text: #92400E;

    --danger: #EF4444;
    --danger-hover: #DC2626;
    --danger-container: #FEF2F2;
    --danger-text: #991B1B;

    --info: #0EA5E9;
    --info-container: #F0F9FF;
    --info-text: #0369A1;

    /* Sidebar Role Tokens */
    --sidebar-bg: var(--navy-900);
    --sidebar-surface: #1E293B;
    --sidebar-text: #94A3B8;
    --sidebar-text-active: #FFFFFF;

    /* Material Design 3 Shape Tokens (FEAT-UI-39) */
    --m3-radius-none: 0px;
    --m3-radius-xs: 4px;
    --m3-radius-sm: 8px;
    --m3-radius-md: 12px;
    --m3-radius-lg: 16px;
    --m3-radius-xl: 28px;
    --m3-radius-full: 9999px;

    /* Material Design 3 Tonal Elevation Tokens (FEAT-UI-39) */
    --m3-elevation-0: none;
    --m3-elevation-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
    --m3-elevation-2: 0 4px 8px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.06);
    --m3-elevation-3: 0 8px 16px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(15, 23, 42, 0.06);
    --m3-elevation-4: 0 12px 24px rgba(15, 23, 42, 0.10), 0 6px 12px rgba(15, 23, 42, 0.08);
    --m3-elevation-5: 0 16px 32px rgba(15, 23, 42, 0.12), 0 8px 16px rgba(15, 23, 42, 0.08);

    /* Backwards-compatible Aliases */
    --radius: var(--m3-radius-md);
    --radius-lg: var(--m3-radius-lg);
    --shadow: var(--m3-elevation-1);
    --shadow-hover: var(--m3-elevation-2);
    --shadow-sm: var(--m3-elevation-1);

    /* Accessibility Focus Ring Tokens (FEAT-NFR-26) */
    --focus-ring-color: var(--primary, #6366F1);
    --focus-ring-width: 2px;
    --focus-ring-offset: 2px;
    --focus-ring: 2px solid var(--focus-ring-color);

    --shadow-md: var(--m3-elevation-2);
    --shadow-lg: var(--m3-elevation-3);
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}