/* ============================================
   CSS VARIABLES - Design Tokens
   Matching johnathanchen.com exactly
   ============================================ */

:root {
    /* ========== COLORS - Backgrounds ========== */
    --color-bg-dark: #000;
    --color-bg-light: #f5f5f5;
    --color-bg-ivory: #fffff0;
    --color-bg-beige: #f1f0eb;
    --color-bg-white: #fff;
    --color-bg-maroon: #5c3d3d;

    /* ========== COLORS - Text ========== */
    --color-text-primary: #fff;
    --color-text-dark: #000;
    --color-text-muted: #a0a0a0;
    --color-text-gray: #808080;
    --color-text-dim: #666;
    --color-text-cream: #f5f0e8;

    /* ========== COLORS - Accents ========== */
    --color-focus: #4a90d9;
    --color-focus-dark: #6bb3ff;

    /* ========== TYPOGRAPHY ========== */
    /* Primary fonts from Adobe Typekit kit udi3upt */
    --font-family-body: 'trasandina', Arial, sans-serif;
    --font-family-heading: 'trasandina', Arial, sans-serif;
    --font-family-nav: 'brandon-grotesque', 'Brandon Grotesque', Arial, sans-serif;
    --font-family-serif: 'adobe-jenson-pro', Georgia, serif;

    /* Typography Scale (Major Third - 1.25 ratio) */
    --font-size-display: 2.5rem;    /* 40px - Hero titles */
    --font-size-h1: 2rem;           /* 32px - Page titles */
    --font-size-h2: 1.5rem;         /* 24px - Section titles */
    --font-size-large: 1.125rem;    /* 18px - Intro text, subtitles */
    --font-size-body: 1rem;         /* 16px - Body text */
    --font-size-small: 0.875rem;    /* 14px - Nav, filters, UI */
    --font-size-caption: 0.8125rem; /* 13px - Metadata, captions */
    --font-size-tiny: 0.75rem;      /* 12px - Counters, timestamps */

    /* Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;

    /* Spacing */
    --letter-spacing-nav: 0.5px;
    --letter-spacing-title: 1px;
    --line-height-body: 1.6;
    --line-height-relaxed: 1.8;

    /* ========== SPACING ========== */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;

    --spacing-header-y: 40px;
    --spacing-header-x: 60px;
    --spacing-content-x: 60px;
    --spacing-grid-gap: 40px;
    --spacing-card-padding: 20px;
    --spacing-section: 60px;
    --max-width: 1400px;
    --max-width-content: 1400px;
    --max-width-text: 700px;

    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-medium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ========== ANIMATIONS ========== */
    --animation-duration-medium: 0.4s;
    --animation-duration-long: 0.6s;
    --animation-stagger: 0.05s;

    /* ========== SHADOWS ========== */
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.06);
    --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-image-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-lightbox: 0 25px 80px rgba(0, 0, 0, 0.5);

    /* ========== ELEVATION ========== */
    --elevation-lift: -6px;

    /* ========== BORDER RADIUS ========== */
    --radius-card: 0;
    --radius-small: 0;

    /* ========== Z-INDEX ========== */
    --z-base: 1;
    --z-header: 100;
    --z-dropdown: 150;
    --z-mobile-menu: 200;
    --z-lightbox: 300;
    --z-skip-link: 400;

    /* ========== SCROLL ========== */
    scroll-behavior: smooth;
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0.01s;
        --transition-medium: 0.01s;
        --transition-slow: 0.01s;
        scroll-behavior: auto;
    }
}

/* ========== MOBILE ========== */
@media (max-width: 768px) {
    :root {
        --spacing-header-y: 20px;
        --spacing-header-x: 20px;
        --spacing-content-x: 20px;
        --spacing-grid-gap: 30px;

        /* Mobile typography scale */
        --font-size-display: 2rem;      /* 32px */
        --font-size-h1: 1.75rem;        /* 28px */
        --font-size-h2: 1.25rem;        /* 20px */
        --font-size-large: 1rem;        /* 16px */
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-header-y: 16px;
        --spacing-header-x: 16px;
        --spacing-content-x: 16px;
    }
}