/* ============================================
   ANA — Design Tokens / Theme Layer
   All colors, fonts, and radii as CSS variables.
   White-label theming overrides --color-primary
   and --color-accent via theme.js at runtime.
   ============================================ */

:root {
    /* Brand Colors — ANA blue-purple palette */
    --color-primary: #0F1117;
    --color-accent: #5B7CF7;
    --color-accent-secondary: #9B6DFF;
    --color-accent-hover: #4A6AE0;
    --color-accent-light: rgba(91, 124, 247, 0.1);

    /* Neutrals — cool-toned to complement blue accent */
    --color-muted: #6B7280;
    --color-bg: #F8F9FB;
    --color-surface: #FFFFFF;
    --color-border: #E2E5EB;
    --color-border-light: #F0F1F4;

    /* Text */
    --color-text: #0F1117;
    --color-text-muted: #6B7280;
    --color-text-inverse: #F8F9FB;
    --color-text-on-primary: #F8F9FB;

    /* Semantic */
    --color-success: #22C55E;
    --color-success-light: rgba(34, 197, 94, 0.1);
    --color-danger: #EF4444;
    --color-danger-light: rgba(239, 68, 68, 0.1);
    --color-warning: #F59E0B;
    --color-warning-light: rgba(245, 158, 11, 0.1);
    --color-info: #22D1EE;
    --color-info-light: rgba(34, 209, 238, 0.1);

    /* Shell (dark navy sidebar + topbar) */
    --color-shell: #0F1117;
    --color-shell-hover: #1A1D27;
    --color-shell-active: #242836;
    --color-shell-border: #242836;
    --color-shell-text: #8B92A5;
    --color-shell-text-active: #FFFFFF;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', var(--font-primary);
    --font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', monospace;

    /* Font Sizes */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 22px;
    --text-3xl: 28px;

    /* Font Weights */
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    --space-3xl: 48px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);

    /* Layout */
    --sidebar-width: 220px;
    --sidebar-width-collapsed: 56px;
    --topbar-height: 52px;
    --submenu-height: 42px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Z-Index */
    --z-sidebar: 100;
    --z-topbar: 110;
    --z-submenu: 90;
    --z-modal-backdrop: 200;
    --z-modal: 210;
    --z-toast: 300;
}