/**
 * TAR Design Tokens - Logo Sizing System
 *
 * Purpose: Centralized logo size definitions using CSS Custom Properties (Variables)
 * Strategy: Hybrid approach combining clamp() with media query constraints
 *
 * Benefits:
 * - Single source of truth for logo sizes
 * - Responsive fluid sizing with clamp()
 * - Media query fallbacks for older browsers
 * - Easy maintenance and updates
 * - Consistent scaling across all viewports
 *
 * Version: 2.0.0
 * Last Updated: 2025-01-10
 */

:root {
    /* ===== HEADER LOGO TOKENS ===== */

    /* Desktop Logo Sizes (≥1024px) */
    --logo-size-desktop-min: 55px; /* Minimum (scrolled state) - 60px × 0.92 */
    --logo-size-desktop-max: 60px; /* Maximum (default state) - +15% from 52px */

    /* Tablet Logo Sizes (768px - 1023px) */
    --logo-size-tablet-min: 50px; /* Minimum (scrolled state) - proportionally scaled */
    --logo-size-tablet-max: 55px; /* Maximum (default state) - proportionally scaled */

    /* Mobile Logo Sizes (<768px) */
    --logo-size-mobile-min: 44px; /* Minimum (scrolled state) - proportionally scaled */
    --logo-size-mobile-max: 48px; /* Maximum (default state) - proportionally scaled */

    /* Viewport-Based Fluid Sizing (5vh = 5% of viewport height) */
    --logo-size-fluid: 5vh; /* Responsive scaling factor */

    /* ===== FOOTER LOGO TOKENS ===== */

    /* Footer logo uses fixed responsive sizing (no clamp, cleaner approach) */
    --logo-size-footer-desktop: 72px; /* Desktop (default) */
    --logo-size-footer-tablet: 56px; /* Tablet (≤768px) */
    --logo-size-footer-mobile: 48px; /* Mobile (≤480px) */

    /* ===== LOGO-TO-TEXT RATIO (TAR Brand Standard) ===== */

    /* Premium luxury brand standard: Logo dominates navigation for brand presence */
    --logo-text-ratio: 4.29; /* 60px logo ÷ 14px navigation = 4.29:1 */

    /* Navigation text size: 14px (0.875rem Jost 500) - actual implementation */

    /* Note: Previous documentation stated 21px, but actual CSS is 14px */

    /* Updated logo sizes for premium brand hierarchy (Option A1):
       - Desktop: 60px logo ÷ 14px nav = 4.29:1 (luxury brand standard)
       - Tablet:  55px logo ÷ 14px nav = 3.93:1
       - Mobile:  48px logo ÷ 18px nav = 2.67:1 (closer to original 2.5:1 target) */

    /* ===== ICON DESIGN TOKENS ===== */

    /* Icon Color Tokens - semantic colors for consistent icon theming */
    --tar-icon-color-default: var(--tar-graphite);
    --tar-icon-color-primary: var(--tar-brown-100);
    --tar-icon-color-secondary: var(--tar-brown-80);
    --tar-icon-color-hover: var(--tar-brown-100);
    --tar-icon-color-disabled: var(--tar-gray-400);
    --tar-icon-color-inverse: var(--tar-white);

    /* Icon Size Tokens - standardized icon sizes across all components */
    --tar-icon-size-xs: 16px; /* Extra small icons (inline text) */
    --tar-icon-size-sm: 20px; /* Small icons (team contact, service details) */
    --tar-icon-size-md: 24px; /* Medium icons (cards, footer social) */
    --tar-icon-size-lg: 32px; /* Large icons (pillar cards, hero sections) */
    --tar-icon-size-xl: 44px; /* Extra large icons - WCAG 2.1 AA Touch Target minimum */
    --tar-icon-size-2xl: 56px; /* XXL icons (featured elements, hero CTAs) */

    /* Icon Stroke Tokens - consistent stroke weights for line-based icons */
    --tar-icon-stroke-width-thin: 1.5;
    --tar-icon-stroke-width-base: 2;
    --tar-icon-stroke-width-bold: 2.5;

    /* Icon Container Tokens - for icons with background containers */
    --tar-icon-bg-light: var(--tar-cream);
    --tar-icon-bg-dark: var(--tar-graphite);
    --tar-icon-border-radius: 50%;

    /* Icon Animation Tokens - consistent transitions and transforms */
    --tar-icon-transition: color 0.2s ease, transform 0.2s ease;
    --tar-icon-hover-scale: scale(1.05);
}

/* ===== USAGE EXAMPLES ===== */

/*
Example 1: Header logo with hybrid clamp() approach
-------------------------------------------------
.tar-navigation__logo {
    height: clamp(
        var(--logo-size-desktop-min),  // Min: 48px
        var(--logo-size-fluid),        // Preferred: 5vh
        var(--logo-size-desktop-max)   // Max: 52px
    );
}

Media query fallback for older browsers:
@media (max-width: 768px) {
    .tar-navigation__logo {
        height: var(--logo-size-tablet-max);  // 48px
    }
}


Example 2: Footer logo with fixed responsive sizing
-------------------------------------------------
.footer-logo-icon {
    height: var(--logo-size-footer-desktop);  // 72px (default)
}

@media (max-width: 768px) {
    .footer-logo-icon {
        height: var(--logo-size-footer-tablet);  // 56px
    }
}

@media (max-width: 480px) {
    .footer-logo-icon {
        height: var(--logo-size-footer-mobile);  // 48px
    }
}


Example 3: Scrolled state logo
-------------------------------------------------
.tar-navigation.scrolled .tar-navigation__logo {
    height: var(--logo-size-desktop-min);  // 48px (reduced from 52px)
}
*/

/* ===== RESPONSIVE SIZING RATIONALE ===== */

/*
Header Logo Progression:
- Mobile:    42px → 38px (scrolled)  | 10% reduction
- Tablet:    48px → 44px (scrolled)  | 8% reduction
- Desktop:   52px → 48px (scrolled)  | 8% reduction

Footer Logo Progression:
- Mobile:    48px (smallest viewports)
- Tablet:    56px (+17% vs mobile)
- Desktop:   72px (+29% vs tablet, +50% vs mobile)

Design Philosophy:
1. Desktop users see largest logos (52px header, 72px footer) - premium impact
2. Tablet users see balanced sizes (48px header, 56px footer) - optimized for middle ground
3. Mobile users see optimized sizes (42px header, 48px footer) - space-efficient
4. Scrolled state reduces header logo for more content visibility
5. Footer logo remains prominent across all viewports (brand reinforcement)
*/

/* ===== BROWSER COMPATIBILITY ===== */

/*
CSS Custom Properties (Variables): 98% browser support
- Chrome 49+, Firefox 31+, Safari 9.1+, Edge 15+

clamp() Function: 95% browser support
- Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+

Fallback Strategy:
- Older browsers without clamp() support will use media query fixed sizes
- CSS variables provide universal sizing consistency
- Progressive enhancement approach (works everywhere, enhanced in modern browsers)
*/