/* ============================================
   INVENTUM - CSS Variables (Material Design 3)
   ============================================ */

:root {
    /* ========================================
       COLOR SYSTEM - Material Design 3
       Primary: Vibrant Orange (energetic, modern)
       ======================================== */

    /* Primary Colors - Приглушённый оранжевый */
    --md-sys-color-primary: #E26A35;
    --md-sys-color-primary-hover: #D05A28;
    --md-sys-color-on-primary: #FFFFFF;
    --md-sys-color-primary-container: #FFF0E8;
    --md-sys-color-on-primary-container: #2D1A0D;

    /* Secondary Colors - Тёплый серо-коричневый */
    --md-sys-color-secondary: #4A4A4A;
    --md-sys-color-secondary-hover: #3A3A3A;
    --md-sys-color-on-secondary: #FFFFFF;
    --md-sys-color-secondary-container: #F5F5F5;
    --md-sys-color-on-secondary-container: #2D2D2D;

    /* Tertiary Colors - Тёплый акцент */
    --md-sys-color-tertiary: #5D4E37;
    --md-sys-color-on-tertiary: #FFFFFF;
    --md-sys-color-tertiary-container: #F5F0EB;

    /* Surface Colors */
    --md-sys-color-surface: #FFFBFE;
    --md-sys-color-surface-dim: #DED8DC;
    --md-sys-color-surface-bright: #FFFBFE;
    --md-sys-color-on-surface: #1C1B1F;
    --md-sys-color-on-surface-variant: #49454F;
    --md-sys-color-surface-container: #F3EDF1;
    --md-sys-color-surface-container-low: #F7F2F5;
    --md-sys-color-surface-container-high: #ECE6EA;
    --md-sys-color-surface-container-highest: #E6E1E5;

    /* Background */
    --md-sys-color-background: #FFFBFE;
    --md-sys-color-on-background: #1C1B1F;

    /* Outline */
    --md-sys-color-outline: #79747E;
    --md-sys-color-outline-variant: #CAC4D0;

    /* Error */
    --md-sys-color-error: #B3261E;
    --md-sys-color-on-error: #FFFFFF;
    --md-sys-color-error-container: #F9DEDC;
    --md-sys-color-on-error-container: #410E0B;

    /* Success */
    --md-sys-color-success: #2E7D32;
    --md-sys-color-on-success: #FFFFFF;

    /* Inverse */
    --md-sys-color-inverse-surface: #313033;
    --md-sys-color-inverse-on-surface: #F4EFF4;
    --md-sys-color-inverse-primary: #FFB68C;

    /* Scrim */
    --md-sys-color-scrim: #000000;

    /* Shadow */
    --md-sys-color-shadow: #000000;


    /* ========================================
       ELEVATION (Shadows) - Material Design 3
       ======================================== */

    --md-sys-elevation-0: none;
    --md-sys-elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
    --md-sys-elevation-3: 0px 4px 8px 3px rgba(0, 0, 0, 0.15), 0px 1px 3px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-4: 0px 6px 10px 4px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.3);
    --md-sys-elevation-5: 0px 8px 12px 6px rgba(0, 0, 0, 0.15), 0px 4px 4px rgba(0, 0, 0, 0.3);


    /* ========================================
       SHAPE (Border Radius) - Material Design 3
       ======================================== */

    --md-sys-shape-corner-none: 0px;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;


    /* ========================================
       TYPOGRAPHY - Material Design 3
       Using Roboto font family
       ======================================== */

    /* Font Family */
    --md-sys-typescale-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Display */
    --md-sys-typescale-display-large-size: 57px;
    --md-sys-typescale-display-large-line-height: 64px;
    --md-sys-typescale-display-large-weight: 400;

    --md-sys-typescale-display-medium-size: 45px;
    --md-sys-typescale-display-medium-line-height: 52px;
    --md-sys-typescale-display-medium-weight: 400;

    --md-sys-typescale-display-small-size: 36px;
    --md-sys-typescale-display-small-line-height: 44px;
    --md-sys-typescale-display-small-weight: 400;

    /* Headline */
    --md-sys-typescale-headline-large-size: 32px;
    --md-sys-typescale-headline-large-line-height: 40px;
    --md-sys-typescale-headline-large-weight: 400;

    --md-sys-typescale-headline-medium-size: 28px;
    --md-sys-typescale-headline-medium-line-height: 36px;
    --md-sys-typescale-headline-medium-weight: 400;

    --md-sys-typescale-headline-small-size: 24px;
    --md-sys-typescale-headline-small-line-height: 32px;
    --md-sys-typescale-headline-small-weight: 400;

    /* Title */
    --md-sys-typescale-title-large-size: 22px;
    --md-sys-typescale-title-large-line-height: 28px;
    --md-sys-typescale-title-large-weight: 500;

    --md-sys-typescale-title-medium-size: 16px;
    --md-sys-typescale-title-medium-line-height: 24px;
    --md-sys-typescale-title-medium-weight: 500;

    --md-sys-typescale-title-small-size: 14px;
    --md-sys-typescale-title-small-line-height: 20px;
    --md-sys-typescale-title-small-weight: 500;

    /* Body */
    --md-sys-typescale-body-large-size: 16px;
    --md-sys-typescale-body-large-line-height: 24px;
    --md-sys-typescale-body-large-weight: 400;

    --md-sys-typescale-body-medium-size: 14px;
    --md-sys-typescale-body-medium-line-height: 20px;
    --md-sys-typescale-body-medium-weight: 400;

    --md-sys-typescale-body-small-size: 12px;
    --md-sys-typescale-body-small-line-height: 16px;
    --md-sys-typescale-body-small-weight: 400;

    /* Label */
    --md-sys-typescale-label-large-size: 14px;
    --md-sys-typescale-label-large-line-height: 20px;
    --md-sys-typescale-label-large-weight: 500;

    --md-sys-typescale-label-medium-size: 12px;
    --md-sys-typescale-label-medium-line-height: 16px;
    --md-sys-typescale-label-medium-weight: 500;

    --md-sys-typescale-label-small-size: 11px;
    --md-sys-typescale-label-small-line-height: 16px;
    --md-sys-typescale-label-small-weight: 500;


    /* ========================================
       SPACING
       ======================================== */

    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    --spacing-4xl: 96px;


    /* ========================================
       LAYOUT
       ======================================== */

    --container-max-width: 1200px;
    --container-padding: 16px;
    --section-padding-mobile: 48px;
    --section-padding-desktop: 80px;

    --header-height: 72px;
    --header-height-mobile: 64px;


    /* ========================================
       TRANSITIONS
       ======================================== */

    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;


    /* ========================================
       Z-INDEX
       ======================================== */

    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
}


/* ========================================
   RESPONSIVE TYPOGRAPHY
   Mobile-first approach
   ======================================== */

/* Mobile (default) */
:root {
    --font-size-h1: 32px;
    --font-size-h2: 24px;
    --font-size-h3: 20px;
    --font-size-body: 16px;
    --font-size-small: 14px;

    --line-height-h1: 40px;
    --line-height-h2: 32px;
    --line-height-h3: 28px;
}

/* Tablet */
@media (min-width: 768px) {
    :root {
        --font-size-h1: 42px;
        --font-size-h2: 32px;
        --font-size-h3: 24px;

        --line-height-h1: 52px;
        --line-height-h2: 40px;
        --line-height-h3: 32px;

        --container-padding: 24px;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    :root {
        --font-size-h1: 56px;
        --font-size-h2: 40px;
        --font-size-h3: 28px;

        --line-height-h1: 64px;
        --line-height-h2: 48px;
        --line-height-h3: 36px;

        --container-padding: 32px;
    }
}