/* ==========================================================================
   Design Tokens - Taxiservice Tirol
   ========================================================================== */

:root {
    /* Brand Colors */
    --color-gold:          #C8A84E;
    --color-gold-light:    #D4BA6A;
    --color-gold-dark:     #A8893A;
    --color-gold-bg:       #FBF7ED;
    --color-black:         #1A1A1A;
    --color-black-soft:    #2D2D2D;
    --color-white:         #FFFFFF;

    /* Gray Scale */
    --color-gray-50:       #F9FAFB;
    --color-gray-100:      #F3F4F6;
    --color-gray-200:      #E5E7EB;
    --color-gray-300:      #D1D5DB;
    --color-gray-400:      #9CA3AF;
    --color-gray-500:      #6B7280;
    --color-gray-600:      #4B5563;
    --color-gray-700:      #374151;
    --color-gray-800:      #1F2937;
    --color-gray-900:      #111827;

    /* Semantic Colors */
    --color-primary:       var(--color-gold);
    --color-primary-hover: var(--color-gold-dark);
    --color-text:          var(--color-gray-900);
    --color-text-muted:    var(--color-gray-700);
    --color-text-light:    var(--color-gray-800);
    --color-text-inverse:  var(--color-white);
    --color-bg:            var(--color-white);
    --color-bg-alt:        var(--color-gray-50);
    --color-bg-dark:       var(--color-black);
    --color-border:        var(--color-gray-200);
    --color-success:       #16A34A;
    --color-error:         #DC2626;
    --color-focus:         #2563EB;

    /* Typography */
    --font-primary:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;
    --text-4xl:   2.25rem;
    --text-5xl:   3rem;

    --leading-tight:   1.25;
    --leading-normal:  1.6;
    --leading-relaxed: 1.75;

    --weight-normal:   400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;

    /* Spacing */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;

    /* Layout */
    --container-max:     1200px;
    --container-narrow:  800px;
    --container-padding: var(--space-4);

    /* Borders */
    --radius-sm:   0.25rem;
    --radius-md:   0.5rem;
    --radius-lg:   1rem;
    --radius-xl:   1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
    --shadow-md:   0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --shadow-lg:   0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
    --shadow-xl:   0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
    --shadow-gold: 0 4px 14px rgba(200,168,78,0.3);

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow:   350ms ease;

    /* Z-Index */
    --z-header:       100;
    --z-nav-mobile:   200;
    --z-fab:          300;
    --z-cookie:       400;
    --z-modal:        500;

    /* Header */
    --header-top-height: 2.5rem;
    --header-main-height: 4rem;
    --header-total-height: 6.5rem;
}

@media (min-width: 768px) {
    :root {
        --container-padding: var(--space-6);
    }
}

@media (min-width: 1024px) {
    :root {
        --container-padding: var(--space-8);
        --header-main-height: 5rem;
        --header-total-height: 7.5rem;
    }
}