/*
Theme Name:   Alltrucks Magazin
Theme URI:    https://test.brandnew.media
Description:  Custom Child Theme for Alltrucks Magazin based on Hello Elementor
Author:       Brandnew Media
Author URI:   https://brandnew.media
Template:     hello-elementor
Version:      1.0.0
Text Domain:  alltrucks-magazin
*/

/*
==============================================
Font Faces
==============================================
*/
@font-face {
    font-family: 'Transducer VF';
    src: url('fonts/transducer-regular-webfont.woff2') format('woff2'),
         url('fonts/transducer-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Transducer VF';
    src: url('fonts/transducer-medium-webfont.woff2') format('woff2'),
         url('fonts/transducer-medium-webfont.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/*
==============================================
Design System - Colors
==============================================
*/
:root {
    /* Primary Colors */
    --cyan: #00B5E2;
    --cyan-80: rgba(0, 181, 226, 0.8);
    --cyan-20: rgba(0, 181, 226, 0.2);
    --cyan-10: rgba(0, 181, 226, 0.1);

    /* Secondary Colors */
    --navy: #00193E;
    --navy-dark: #000F26;
    --navy-mid: #01385E;
    --navy-90: rgba(0, 25, 62, 0.9);

    /* Neutral Colors */
    --white: #fff;
    --gray-100: #F0F4F8;
    --gray-200: #DFE5E9;
    --gray-400: #BFCBD1;
    --gray-600: #7A8FA0;

    /* Text Colors */
    --text: #0D1B2A;
    --text-muted: #4A5E72;

    /* Typography */
    --font-display: 'Transducer VF', sans-serif;
    --font-ui: 'Inter', sans-serif;

    /* Easings */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Border Radius */
    --r: 8px;
    --rl: 16px;
    --rxl: 22px;

    /* Shadows */
    --sh: 0 4px 20px rgba(0, 25, 62, 0.10);
    --sh-lg: 0 16px 56px rgba(0, 25, 62, 0.22);
    --sh-cyan: 0 8px 32px rgba(0, 181, 226, 0.3);
}

/*
==============================================
Typography
==============================================
*/
body {
    font-family: var(--font-ui);
    background: var(--gray-100);
    color: var(--text);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    background-image: radial-gradient(rgba(0, 25, 62, 0.05) 1px, transparent 1px);
    background-size: 22px 22px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 500;
    line-height: 1.25;
    color: var(--navy-dark);
    text-transform: uppercase;
    letter-spacing: 0;
}

/*
==============================================
Global Styles
==============================================
*/
.alltrucks-container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 108px;
}

/*
==============================================
Animations
==============================================
*/
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease forwards;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Staggered animation delays */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/*
==============================================
Utility Classes
==============================================
*/
.skew-element {
    transform: skewY(-2deg);
}

.skew-element-reverse {
    transform: skewY(2deg);
}

.text-gradient {
    background: linear-gradient(135deg, var(--color-primary-cyan), var(--color-accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/*
==============================================
Responsive
==============================================
*/
@media (max-width: 1024px) {
    .alltrucks-container {
        padding: 0 var(--spacing-sm);
    }
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 80px;
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-lg: 24px;
        --spacing-xl: 32px;
        --spacing-2xl: 48px;
    }
}