/**
 * CSS Variables - GlareCheck Design System
 * Central definition of all design tokens
 * Include this file FIRST in all pages
 */

:root {
    /* Primary Colors */
    --primary-blue: #4274a5;
    --primary-blue-dark: #35608a;
    --primary-blue-light: #5a8fc4;

    /* Accent Colors */
    --accent-yellow: #ffc107;
    --accent-yellow-dark: #d4a106;

    /* Semantic Colors */
    --danger-color: #dc3545;
    --danger-color-dark: #b91c1c;
    --warning-color: #f59e0b;
    --warning-color-dark: #d97706;
    --success-color: #10b981;
    --success-color-dark: #059669;
    --info-color: #4274a5;

    /* Text Colors */
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-muted: #94a3b8;
    --text-light: #64748b;

    /* Background Colors */
    --background-light: #f8fafc;
    --background-white: #ffffff;
    --background-gray: #f1f5f9;

    /* Border Colors */
    --border-color: #e2e8f0;
    --border-color-dark: #cbd5e1;

    /* Layout Dimensions */
    --header-height: 70px;
    --sidebar-width: 380px;

    /* Typography */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace;

    /* Spacing Scale */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 10px 40px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-panel: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1070;
    --z-toast: 9999;
}

/* Base Reset */
*, *::before, *::after {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-family-base);
    color: var(--text-primary);
    background-color: var(--background-light);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Hide number input spinner arrows globally */
input[type="number"] {
    -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}