/* ============================================
   Tres Estrellas La Previa - Design System
   Tokens extraídos de Stitch MCP
   ============================================ */

:root {
    /* ── Colores de Marca ── */
    --celeste-sky: #75AADB;
    --champion-gold: #D4AF37;
    --pitch-black: #1A1A1A;
    --victory-white: #FFFFFF;

    /* ── Colores del Sistema (Material 3 from Stitch) ── */
    --primary: #28628f;
    --on-primary: #ffffff;
    --primary-container: #75aadb;
    --on-primary-container: #003e63;
    --inverse-primary: #97ccfe;

    --secondary: #735c00;
    --on-secondary: #ffffff;
    --secondary-container: #fed65b;
    --on-secondary-container: #745c00;

    --tertiary: #5d5f5f;
    --on-tertiary: #ffffff;
    --tertiary-container: #a4a5a5;

    --error: #ba1a1a;
    --on-error: #ffffff;
    --error-container: #ffdad6;

    --surface: #f8f9fd;
    --surface-dim: #d9dade;
    --surface-bright: #f8f9fd;
    --surface-container: #edeef2;
    --surface-container-low: #f3f3f8;
    --surface-container-high: #e7e8ec;
    --surface-container-highest: #e1e2e6;
    --surface-container-lowest: #ffffff;

    --on-surface: #191c1f;
    --on-surface-variant: #41474f;
    --outline: #71787f;
    --outline-variant: #c1c7d0;

    --inverse-surface: #2e3134;
    --inverse-on-surface: #f0f0f5;
    --surface-tint: #28628f;

    /* ── Tipografía ── */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;

    /* Display */
    --display-lg-size: 48px;
    --display-lg-weight: 800;
    --display-lg-height: 56px;
    --display-lg-spacing: -0.02em;

    --display-lg-mobile-size: 36px;
    --display-lg-mobile-weight: 800;
    --display-lg-mobile-height: 42px;

    /* Headline */
    --headline-lg-size: 32px;
    --headline-lg-weight: 700;
    --headline-lg-height: 40px;

    --headline-md-size: 24px;
    --headline-md-weight: 700;
    --headline-md-height: 32px;

    /* Body */
    --body-lg-size: 18px;
    --body-lg-weight: 400;
    --body-lg-height: 28px;

    --body-md-size: 16px;
    --body-md-weight: 400;
    --body-md-height: 24px;

    /* Label */
    --label-md-size: 14px;
    --label-md-weight: 600;
    --label-md-height: 20px;
    --label-md-spacing: 0.01em;

    --label-sm-size: 12px;
    --label-sm-weight: 600;
    --label-sm-height: 16px;

    /* ── Espaciado ── */
    --container-max: 1280px;
    --gutter: 24px;
    --margin-mobile: 16px;
    --margin-desktop: 32px;
    --stack-sm: 8px;
    --stack-md: 16px;
    --stack-lg: 32px;
    --stack-xl: 48px;
    --stack-xxl: 64px;

    /* ── Border Radius ── */
    --rounded-sm: 0.25rem;
    --rounded: 0.5rem;
    --rounded-md: 0.75rem;
    --rounded-lg: 1rem;
    --rounded-xl: 1.5rem;
    --rounded-full: 9999px;

    /* ── Sombras ── */
    --shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0px 4px 20px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0px 8px 40px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0px 16px 60px rgba(0, 0, 0, 0.12);
    --shadow-gold: 0px 4px 20px rgba(212, 175, 55, 0.25);
    --shadow-celeste: 0px 4px 20px rgba(117, 170, 219, 0.25);

    /* ── Glass Effect ── */
    --glass-bg: rgba(255, 255, 255, 0.8);
    --glass-blur: blur(12px);
    --glass-border: 1px solid rgba(255, 255, 255, 0.3);

    /* ── Transiciones ── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;
    --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Clases de Tipografía ── */
.display-lg {
    font-family: var(--font-family);
    font-size: var(--display-lg-size);
    font-weight: var(--display-lg-weight);
    line-height: var(--display-lg-height);
    letter-spacing: var(--display-lg-spacing);
}

.headline-lg {
    font-family: var(--font-family);
    font-size: var(--headline-lg-size);
    font-weight: var(--headline-lg-weight);
    line-height: var(--headline-lg-height);
}

.headline-md {
    font-family: var(--font-family);
    font-size: var(--headline-md-size);
    font-weight: var(--headline-md-weight);
    line-height: var(--headline-md-height);
}

.body-lg {
    font-family: var(--font-family);
    font-size: var(--body-lg-size);
    font-weight: var(--body-lg-weight);
    line-height: var(--body-lg-height);
}

.body-md {
    font-family: var(--font-family);
    font-size: var(--body-md-size);
    font-weight: var(--body-md-weight);
    line-height: var(--body-md-height);
}

.label-md {
    font-family: var(--font-family);
    font-size: var(--label-md-size);
    font-weight: var(--label-md-weight);
    line-height: var(--label-md-height);
    letter-spacing: var(--label-md-spacing);
}

.label-sm {
    font-family: var(--font-family);
    font-size: var(--label-sm-size);
    font-weight: var(--label-sm-weight);
    line-height: var(--label-sm-height);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .display-lg {
        font-size: var(--display-lg-mobile-size);
        font-weight: var(--display-lg-mobile-weight);
        line-height: var(--display-lg-mobile-height);
    }
}