/* Spirit Sight - Enterprise Bourbon Theme */
/* Clean enterprise SaaS aesthetic with bourbon industry warmth */
/* Deep navy foundation, bourbon amber accents, professional refinement */

:root {
    /* ========== BRAND PALETTE ========== */
    /* Navy foundation with bourbon amber warmth */
    --color-brand-navy: #1B2A4A;
    --color-brand-navy-light: #243556;
    --color-brand-navy-dark: #131E36;
    --color-brand-amber: #C17817;
    --color-brand-amber-light: #D4922E;
    --color-brand-amber-dark: #A56510;
    --color-brand-copper: #B87333;
    --color-brand-oak: #8B6F47;

    /* ========== NEUTRALS ========== */
    /* Clean, professional interface chrome */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F7F8FA;
    --color-bg-tertiary: #EEF0F4;
    --color-bg-inset: #E4E7ED;
    --color-bg-hover: #E8EBF0;
    --color-bg-active: #DCE0E8;
    --color-bg-selected: #F0EDE8;
    --color-bg-dark: #1B2A4A;

    /* ========== TEXT HIERARCHY ========== */
    --color-text-primary: #1B2A4A;
    --color-text-secondary: #4A5568;
    --color-text-tertiary: #718096;
    --color-text-quaternary: #A0AEC0;
    --color-text-inverse: #FFFFFF;
    --color-text-muted: #CBD5E0;

    /* ========== STATUS COLORS ========== */
    /* Reserved for meaning — the only high-chroma colors */

    /* Critical - Immediate action required */
    --color-critical: #DC2626;
    --color-critical-bg: #FEF2F2;
    --color-critical-border: #FECACA;

    /* Warning - Attention needed (bourbon amber) */
    --color-warning: #D97706;
    --color-warning-bg: #FFFBEB;
    --color-warning-border: #FDE68A;

    /* Success - All good */
    --color-success: #059669;
    --color-success-bg: #ECFDF5;
    --color-success-border: #A7F3D0;

    /* Info - Neutral information */
    --color-info: #2563EB;
    --color-info-bg: #EFF6FF;
    --color-info-border: #BFDBFE;

    /* ========== INTERACTIVE ========== */
    --color-primary: #1B2A4A;
    --color-primary-hover: #243556;
    --color-primary-active: #131E36;
    --color-primary-light: #F0EDE8;

    /* Accent (bourbon amber) for CTAs and highlights */
    --color-accent: #C17817;
    --color-accent-hover: #D4922E;
    --color-accent-active: #A56510;
    --color-accent-light: #FFF8F0;

    /* Legacy aliases */
    --color-error: var(--color-critical);
    --color-error-light: var(--color-critical-bg);
    --color-success-light: var(--color-success-bg);
    --color-warning-light: var(--color-warning-bg);
    --color-info-light: var(--color-info-bg);
    --color-danger: var(--color-critical);

    /* ========== BORDERS ========== */
    --color-border-primary: #E2E8F0;
    --color-border-secondary: #EDF2F7;
    --color-border-hover: #CBD5E0;
    --color-border-focus: #C17817;
    --color-border-active: #C17817;

    /* ========== SHADOWS ========== */
    /* 3-tier professional elevation system */
    --shadow-xs: 0 1px 2px rgba(27, 42, 74, 0.04);
    --shadow-sm: 0 1px 3px rgba(27, 42, 74, 0.06), 0 1px 2px rgba(27, 42, 74, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(27, 42, 74, 0.07), 0 2px 4px -1px rgba(27, 42, 74, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(27, 42, 74, 0.08), 0 4px 6px -2px rgba(27, 42, 74, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(27, 42, 74, 0.08), 0 10px 10px -5px rgba(27, 42, 74, 0.03);
    --shadow-2xl: 0 25px 50px -12px rgba(27, 42, 74, 0.15);
    --shadow-focus: 0 0 0 3px rgba(193, 120, 23, 0.2);
    --shadow-focus-error: 0 0 0 3px rgba(220, 38, 38, 0.2);

    /* ========== TYPOGRAPHY ========== */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;

    /* Refined type scale */
    --font-size-2xs: 10px;
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-lg: 14px;
    --font-size-xl: 16px;
    --font-size-2xl: 18px;
    --font-size-3xl: 20px;
    --font-size-4xl: 24px;
    --font-size-5xl: 30px;
    --font-size-display: 36px;

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

    /* Line heights */
    --line-height-none: 1;
    --line-height-tight: 1.2;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;

    /* Letter spacing */
    --letter-spacing-tighter: -0.02em;
    --letter-spacing-tight: -0.01em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.025em;
    --letter-spacing-wider: 0.05em;
    --letter-spacing-widest: 0.1em;

    /* ========== SPACING - 4px Grid ========== */
    --spacing-px: 1px;
    --spacing-0: 0;
    --spacing-0-5: 2px;
    --spacing-1: 4px;
    --spacing-1-5: 6px;
    --spacing-2: 8px;
    --spacing-2-5: 10px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    --spacing-10: 40px;
    --spacing-12: 48px;
    --spacing-16: 64px;
    --spacing-20: 80px;

    /* Legacy aliases */
    --spacing-xs: var(--spacing-1);
    --spacing-sm: var(--spacing-2);
    --spacing-md: var(--spacing-4);
    --spacing-lg: var(--spacing-6);
    --spacing-xl: var(--spacing-8);
    --spacing-2xl: var(--spacing-12);

    /* ========== BORDER RADIUS ========== */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* ========== TRANSITIONS ========== */
    --transition-fast: 100ms ease-out;
    --transition-base: 150ms ease-out;
    --transition-slow: 300ms ease-out;
    --transition-panel: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ========== Z-INDEX ========== */
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;

    /* ========== LAYOUT ========== */
    --header-height: 56px;
    --sidebar-width: 248px;
    --sidebar-collapsed-width: 64px;
    --content-max-width: 1440px;
    --content-padding: var(--spacing-6);

    /* ========== LEGACY ALIASES ========== */
    /* Preserve backward compatibility with existing module CSS */
    --color-surface: var(--color-bg-primary);
    --color-surface-primary: var(--color-bg-primary);
    --color-surface-secondary: var(--color-bg-secondary);
    --color-surface-tertiary: var(--color-bg-tertiary);
    --color-surface-hover: var(--color-bg-hover);
    --color-background: var(--color-bg-secondary);
    --color-border: var(--color-border-primary);
    --color-text: var(--color-text-primary);
    --font-family: var(--font-family-base);
    --color-accent-primary: var(--color-accent);
    --color-accent-light: var(--color-accent-light);
    --color-secondary: var(--color-text-secondary);
    --color-secondary-light: var(--color-bg-tertiary);
    --color-text-link: var(--color-accent);
    --color-text-accent: var(--color-accent);
    --color-primary-dark: var(--color-primary-active);
    --color-primary-rgb: 27, 42, 74;
    --color-accent-rgb: 193, 120, 23;
    --color-accent-warm: var(--color-accent);
    --shadow-card-hover: var(--shadow-md);
    --shadow-accent: var(--shadow-focus);
    --color-active: var(--color-success);
    --color-inactive: var(--color-text-quaternary);
    --color-pending: var(--color-warning);
    --color-success-dark: #047857;
    --color-success-hover: #059669;
    --color-error-dark: #B91C1C;
    --color-error-hover: #DC2626;
    --color-warning-dark: #B45309;
    --color-warning-hover: #D97706;
    --color-info-dark: #1D4ED8;
    --color-info-hover: #2563EB;

    /* ========== MODULE SHORTHAND ALIASES ========== */
    /* Many modules use these shorthand names instead of --color-* prefixed names.
       These aliases ensure modules resolve to theme variables instead of fallback hex. */
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --bg-card: var(--color-bg-primary);
    --card-bg: var(--color-bg-primary);
    --bg-secondary: var(--color-bg-secondary);
    --bg-hover: var(--color-bg-hover);
    --bg-primary: var(--color-bg-primary);
    --border-color: var(--color-border-primary);
    --primary: var(--color-primary);
    --primary-hover: var(--color-primary-hover);
    --input-bg: var(--color-bg-primary);
}

/* ========== BASE STYLES ========== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg-secondary);
    margin: 0;
    padding: 0;
}

/* ========== FOCUS STYLES ========== */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}

/* ========== SELECTION ========== */
::selection {
    background-color: rgba(193, 120, 23, 0.15);
    color: var(--color-text-primary);
}

/* ========== HEADINGS ========== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-display);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin: 0;
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-tight);
}

h1 { font-size: var(--font-size-4xl); }
h2 { font-size: var(--font-size-3xl); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); }
h6 { font-size: var(--font-size-base); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); }

/* ========== LINKS ========== */
a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-hover);
}

/* ========== MONOSPACE DATA ========== */
.mono, [data-type="number"], .numeric {
    font-family: var(--font-family-mono);
    font-feature-settings: 'tnum' 1;
}

/* ========== CODE ========== */
code, pre {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}

code {
    background: var(--color-bg-tertiary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--color-brand-navy);
}

pre {
    background: var(--color-bg-tertiary);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
    border: 1px solid var(--color-border-secondary);
}

pre code {
    background: none;
    padding: 0;
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-primary);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-border-hover);
}