/* ===========================================
   INTERLINK GO - Design System Variables
   webOS TV App
   Migrated from Flutter Reference
   =========================================== */

:root {
    /* ===== Colors ===== */

    /* Primary - Indigo moderno */
    --color-primary: #6366F1;
    --color-primary-hover: #818CF8;
    --color-primary-dark: #4F46E5;

    /* Secondary - Cyan brillante */
    --color-secondary: #22D3EE;
    --color-secondary-light: #67E8F9;
    --color-secondary-dark: #06B6D4;

    /* Accent - Pink */
    --color-accent: #F472B6;
    --color-accent-light: #F9A8D4;
    --color-accent-dark: #EC4899;

    /* Background - Casi negro con tinte azul */
    --color-bg-primary: #0F0F1A;
    --color-bg-secondary: #1A1A2E;
    --color-bg-tertiary: #252542;
    --color-bg-card: #1A1A2E;
    --color-bg-elevated: #2D2D4A;
    --color-bg-overlay: rgba(15, 15, 26, 0.85);
    --color-bg-overlay-light: rgba(15, 15, 26, 0.5);

    /* Text */
    --color-text-primary: #F8FAFC;
    --color-text-secondary: #94A3B8;
    --color-text-muted: #64748B;
    --color-text-inverse: #0F172A;

    /* States */
    --color-focus: #F8FAFC;
    --color-focus-ring: rgba(99, 102, 241, 0.5);
    --color-success: #22C55E;
    --color-success-light: #4ADE80;
    --color-success-dark: #16A34A;
    --color-warning: #F59E0B;
    --color-warning-light: #FBBF24;
    --color-warning-dark: #D97706;
    --color-error: #EF4444;
    --color-error-light: #F87171;
    --color-error-dark: #DC2626;
    --color-info: #3B82F6;
    --color-info-light: #60A5FA;
    --color-info-dark: #2563EB;

    /* Indicators */
    --color-live: #EF4444;
    --color-online: #22C55E;
    --color-offline: #6B7280;

    /* Borders */
    --color-border: #374151;
    --color-border-light: #4B5563;
    --color-divider: #1F2937;

    /* ===== Typography ===== */
    --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Font sizes (TV optimized - 10ft UI) */
    --font-size-xs: 21px;
    --font-size-sm: 27px;
    --font-size-base: 33px;
    --font-size-md: 36px;
    --font-size-lg: 42px;
    --font-size-xl: 54px;
    --font-size-2xl: 66px;
    --font-size-3xl: 84px;

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Letter spacing */
    --letter-spacing-tight: -1.5px;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.5px;

    /* ===== Spacing ===== */
    --spacing-xs: 10px;
    --spacing-sm: 20px;
    --spacing-md: 30px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-2xl: 80px;
    --spacing-3xl: 120px;

    /* ===== Layout ===== */
    --nav-width: 280px;
    --nav-collapsed-width: 80px;
    --nav-width-collapsed: 80px;
    --header-height: 100px;
    --card-border-radius: 16px;
    --button-border-radius: 16px;

    /* Border Radius Scale */
    --radius-none: 0;
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-xxl: 24px;
    --radius-full: 9999px;

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

    /* ===== Shadows ===== */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.25);
    --shadow-focus: 0 0 0 4px var(--color-focus-ring);

    /* Glow Shadows */
    --shadow-glow-primary: 0 0 20px rgba(99, 102, 241, 0.4);
    --shadow-glow-secondary: 0 0 20px rgba(34, 211, 238, 0.4);
    --shadow-glow-accent: 0 0 20px rgba(244, 114, 182, 0.4);

    /* ===== Gradients ===== */
    --gradient-primary: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    --gradient-secondary: linear-gradient(135deg, #22D3EE 0%, #0EA5E9 100%);
    --gradient-accent: linear-gradient(135deg, #F472B6 0%, #A855F7 100%);
    --gradient-background: linear-gradient(135deg, #1A1A2E 0%, #0F0F1A 100%);
    --gradient-dark-overlay: linear-gradient(to bottom, transparent 0%, rgba(15, 15, 26, 0.8) 100%);

    /* Category Gradients */
    --gradient-category-action: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    --gradient-category-comedy: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
    --gradient-category-romance: linear-gradient(135deg, #F472B6 0%, #EC4899 100%);
    --gradient-category-thriller: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    --gradient-category-horror: linear-gradient(135deg, #1F2937 0%, #111827 100%);
    --gradient-category-fantasy: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    --gradient-category-scifi: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
    --gradient-category-family: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);

    /* ===== Z-index layers ===== */
    --z-base: 1;
    --z-nav: 100;
    --z-modal: 200;
    --z-player: 300;
    --z-overlay: 400;
    --z-toast: 500;

    /* ===== Card Dimensions ===== */
    --card-channel-width: 300px;
    --card-channel-height: auto;
    --card-channel-logo: 160px;
    --card-movie-width: 220px;
    --card-movie-height: 330px;
    --card-continue-width: 400px;
    --card-continue-height: 220px;
}