/* ==========================================
   GALANTA DESIGN SYSTEM
   Based on Figma mockup
   ========================================== */

/* ==========================================
   1. CSS VARIABLES (Design Tokens)
   ========================================== */

:root {
    /* Colors - Primary */
    --color-primary-red: #EE2722;
    --color-primary-black: #231F20;

    /* Semantic Color Aliases (for header-new.css compatibility) */
    --color-primary: #EE2722;
    --color-primary-dark: #D41F1A;
    --color-primary-light: rgba(238, 39, 34, 0.1);

    /* Colors - Neutrals */
    --color-white: #FFFFFF;
    --color-gray-light: #F6F6F6;
    --color-gray-neutral: #918F8F;
    --color-gray-card-bg: #FBFBFB;

    /* Semantic Background Colors */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F6F6F6;

    /* Semantic Text Colors */
    --color-text-primary: #231F20;
    --color-text-secondary: #918F8F;
    --color-text-tertiary: #B0B0B0;

    /* Borders */
    --color-border: #E5E5E5;

    /* Typography - Font Families */
    --font-primary: 'Gilroy', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-fallback: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family: var(--font-primary);

    /* Typography - Font Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Typography - Font Sizes */
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 48px;

    /* Spacing System (8px base) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-container-h: 24px;

    /* Layout */
    --container-max-width: 1280px;
    --container-width: 1280px;
    --sidebar-width: 228px;
    --sidebar-margin: 40px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    --radius-round: 50%;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.09);
    --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.12);
    --shadow-card: 0 4px 4px rgba(0, 0, 0, 0.09);

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

/* ==========================================
   2. GLOBAL RESETS & BASE STYLES
   ========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-primary-black);
    background-color: #F6F6F6;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================
   3. TYPOGRAPHY CLASSES
   ========================================== */

.text-primary {
    color: var(--color-primary-red);
}

.text-black {
    color: var(--color-primary-black);
}

.text-gray {
    color: var(--color-gray-neutral);
}

.font-light {
    font-weight: var(--font-weight-light);
}

.font-regular {
    font-weight: var(--font-weight-regular);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

/* ==========================================
   4. BUTTON STYLES (REUSABLE)
   ========================================== */

.btn {
    display: inline-block;
    padding: 12px 24px;
    font-family: var(--font-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-base);
    line-height: 1;
}

.btn-primary {
    background-color: var(--color-primary-red);
    color: var(--color-white);
}

.btn-primary:hover {
    background-color: #D41F1A;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background-color: var(--color-white);
    color: var(--color-primary-black);
    border: 2px solid var(--color-primary-black);
}

.btn-secondary:hover {
    background-color: var(--color-primary-black);
    color: var(--color-white);
}

/* ==========================================
   5. CARD STYLES (REUSABLE)
   ========================================== */

.card {
    background-color: var(--color-gray-card-bg);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}

/* ==========================================
   6. UTILITY CLASSES
   ========================================== */

.container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--sidebar-margin);
}

.text-center {
    text-align: center;
}

.mt-sm {
    margin-top: var(--spacing-sm);
}

.mt-md {
    margin-top: var(--spacing-md);
}

.mt-lg {
    margin-top: var(--spacing-lg);
}

.mt-xl {
    margin-top: var(--spacing-xl);
}

.mb-sm {
    margin-bottom: var(--spacing-sm);
}

.mb-md {
    margin-bottom: var(--spacing-md);
}

.mb-lg {
    margin-bottom: var(--spacing-lg);
}

.mb-xl {
    margin-bottom: var(--spacing-xl);
}

/* ==========================================
   7. RESPONSIVE BREAKPOINTS
   ========================================== */

/* Mobile: 320px - 767px */
/* Tablet: 768px - 991px */
/* Desktop: 992px+ */

@media (max-width: 991px) {
    :root {
        --container-max-width: 100%;
        --sidebar-width: 100%;
    }
}

@media (max-width: 767px) {
    :root {
        --font-size-2xl: 24px;
        --font-size-3xl: 32px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;
    }
}