/* tvtracker/static/css/theme-default.css */
/* TV Tracker Entertainment-Focused Design System */
/* Updated with comprehensive design tokens and modern color palette */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
    /* ===== ENTERTAINMENT-FOCUSED COLOR PALETTE ===== */
    
    /* Primary Colors - Deep Purple/Indigo for sophistication */
    --color-primary: #4c1d95;
    --color-primary-50: #faf5ff;
    --color-primary-100: #f3e8ff;
    --color-primary-200: #e9d5ff;
    --color-primary-300: #d8b4fe;
    --color-primary-400: #c084fc;
    --color-primary-500: #a855f7;
    --color-primary-600: #9333ea;
    --color-primary-700: #7c3aed;
    --color-primary-800: #6b21a8;
    --color-primary-900: #581c87;
    --color-primary-950: #4c1d95;
    
    /* Secondary Colors - Warm Amber/Gold for accents */
    --color-secondary: #f59e0b;
    --color-secondary-50: #fffbeb;
    --color-secondary-100: #fef3c7;
    --color-secondary-200: #fde68a;
    --color-secondary-300: #fcd34d;
    --color-secondary-400: #fbbf24;
    --color-secondary-500: #f59e0b;
    --color-secondary-600: #d97706;
    --color-secondary-700: #b45309;
    --color-secondary-800: #92400e;
    --color-secondary-900: #78350f;
    --color-secondary-950: #451a03;
    
    /* Success Colors - Modern Green */
    --color-success: #10b981;
    --color-success-50: #ecfdf5;
    --color-success-100: #d1fae5;
    --color-success-200: #a7f3d0;
    --color-success-300: #6ee7b7;
    --color-success-400: #34d399;
    --color-success-500: #10b981;
    --color-success-600: #059669;
    --color-success-700: #047857;
    --color-success-800: #065f46;
    --color-success-900: #064e3b;
    
    /* Warning Colors - Bright Orange */
    --color-warning: #f97316;
    --color-warning-50: #fff7ed;
    --color-warning-100: #ffedd5;
    --color-warning-200: #fed7aa;
    --color-warning-300: #fdba74;
    --color-warning-400: #fb923c;
    --color-warning-500: #f97316;
    --color-warning-600: #ea580c;
    --color-warning-700: #c2410c;
    --color-warning-800: #9a3412;
    --color-warning-900: #7c2d12;
    
    /* Danger Colors - Modern Red */
    --color-danger: #ef4444;
    --color-danger-50: #fef2f2;
    --color-danger-100: #fee2e2;
    --color-danger-200: #fecaca;
    --color-danger-300: #fca5a5;
    --color-danger-400: #f87171;
    --color-danger-500: #ef4444;
    --color-danger-600: #dc2626;
    --color-danger-700: #b91c1c;
    --color-danger-800: #991b1b;
    --color-danger-900: #7f1d1d;
    
    /* Info Colors - Cyan Blue */
    --color-info: #06b6d4;
    --color-info-50: #ecfeff;
    --color-info-100: #cffafe;
    --color-info-200: #a5f3fc;
    --color-info-300: #67e8f9;
    --color-info-400: #22d3ee;
    --color-info-500: #06b6d4;
    --color-info-600: #0891b2;
    --color-info-700: #0e7490;
    --color-info-800: #155e75;
    --color-info-900: #164e63;

    /* ===== NEUTRAL COLORS ===== */
    
    /* Gray Scale */
    --color-gray-50: #fafaf9;
    --color-gray-100: #f5f5f4;
    --color-gray-200: #e7e5e4;
    --color-gray-300: #d6d3d1;
    --color-gray-400: #a8a29e;
    --color-gray-500: #78716c;
    --color-gray-600: #57534e;
    --color-gray-700: #44403c;
    --color-gray-800: #292524;
    --color-gray-900: #1c1917;
    --color-gray-950: #0c0a09;
    
    /* ===== SURFACE & BACKGROUND COLORS ===== */
    
    /* Main backgrounds */
    --color-bg: #fafaf9;              /* Light warm gray body background */
    --color-surface: #ffffff;         /* Pure white for cards, modals */
    --color-surface-secondary: #faf5ff; /* Very light purple for subtle sections */
    --color-surface-tertiary: #f5f5f4;  /* Light gray for form backgrounds */
    
    /* Border colors */
    --color-border: #e5e7eb;          /* Light purple-gray borders */
    --color-border-light: #f3f4f6;    /* Very light borders */
    --color-border-dark: #d1d5db;     /* Darker borders for emphasis */
    
    /* ===== TEXT COLORS ===== */
    
    --color-text-primary: #1f2937;    /* Dark charcoal for main text */
    --color-text-secondary: #6b7280;  /* Medium gray for secondary text */
    --color-text-tertiary: #9ca3af;   /* Light gray for muted text */
    --color-text-inverse: #ffffff;    /* White text for dark backgrounds */
    --color-text-link: var(--color-primary);
    --color-text-link-hover: var(--color-primary-700);

    /* ===== TYPOGRAPHY SYSTEM ===== */
    
    /* Font families */
    --font-family-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    --font-family-headings: 'Poppins', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    
    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Font sizes */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 1.875rem;  /* 30px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-5xl: 3rem;      /* 48px */
    
    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;

    /* ===== SPACING SYSTEM ===== */
    
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    
    /* ===== BORDER RADIUS SYSTEM ===== */
    
    --radius-sm: 0.125rem;    /* 2px */
    --radius-base: 0.25rem;   /* 4px */
    --radius-md: 0.375rem;    /* 6px */
    --radius-lg: 0.5rem;      /* 8px */
    --radius-xl: 0.75rem;     /* 12px */
    --radius-2xl: 1rem;       /* 16px */
    --radius-3xl: 1.5rem;     /* 24px */
    --radius-full: 9999px;    /* Perfect circle */

    /* ===== SHADOW SYSTEM ===== */
    
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    
    /* ===== BOOTSTRAP VARIABLE OVERRIDES ===== */
    
    /* Map our design tokens to Bootstrap variables */
    --bs-primary: var(--color-primary);
    --bs-primary-rgb: 76, 29, 149;
    --bs-secondary: var(--color-secondary);
    --bs-secondary-rgb: 245, 158, 11;
    --bs-success: var(--color-success);
    --bs-success-rgb: 16, 185, 129;
    --bs-info: var(--color-info);
    --bs-info-rgb: 6, 182, 212;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 249, 115, 22;
    --bs-danger: var(--color-danger);
    --bs-danger-rgb: 239, 68, 68;
    --bs-light: var(--color-gray-100);
    --bs-light-rgb: 245, 245, 244;
    --bs-dark: var(--color-text-primary);
    --bs-dark-rgb: 31, 41, 55;
    
    /* Background and text colors */
    --bs-body-bg: var(--color-bg);
    --bs-body-color: var(--color-text-primary);
    --bs-body-font-family: var(--font-family-sans);
    --bs-body-font-size: var(--font-size-base);
    --bs-body-font-weight: var(--font-weight-normal);
    --bs-body-line-height: var(--line-height-normal);
    
    /* Border and radius */
    --bs-border-color: var(--color-border);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-xl);
    --bs-border-radius-2xl: var(--radius-2xl);
    
    /* Link colors */
    --bs-link-color: var(--color-text-link);
    --bs-link-hover-color: var(--color-text-link-hover);
    
    /* ===== ANIMATION & TRANSITION SYSTEM ===== */
    
    --transition-fast: 150ms ease-out;
    --transition-base: 250ms ease-out;
    --transition-slow: 350ms ease-out;
    --transition-bounce: 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ===== Z-INDEX SYSTEM ===== */
    
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;

    /* ===== ENTERTAINMENT ACCENTS ===== */
    /* --accent-svg-bg: url('/static/icons/tv-logo-watermark.svg'); */
    --accent-svg-logo: url('/static/icons/tv-logo.svg');
    --accent-svg-star: url('/static/icons/star.svg');
    --accent-svg-film: url('/static/icons/film.svg');
    --accent-svg-clapper: url('/static/icons/clapper.svg');
}

/* ===== DARK MODE SUPPORT (Optional) ===== */

@media (prefers-color-scheme: dark) {
    [data-bs-theme="auto"] {
        --color-bg: var(--color-gray-900);
        --color-surface: var(--color-gray-800);
        --color-surface-secondary: var(--color-gray-850);
        --color-text-primary: var(--color-gray-100);
        --color-text-secondary: var(--color-gray-300);
        --color-text-tertiary: var(--color-gray-400);
        --color-border: var(--color-gray-700);
        --bs-body-bg: var(--color-bg);
        --bs-body-color: var(--color-text-primary);
        --bs-border-color: var(--color-border);
    }
}

/* ===== BASE TYPOGRAPHY STYLES ===== */

body {
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings with entertainment-focused styling */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-family-headings);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--color-text-primary);
    margin-bottom: var(--space-4);
}

h1, .h1 {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-600));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

h2, .h2 {
    font-size: var(--font-size-3xl);
    color: var(--color-primary-700);
}

h3, .h3 {
    font-size: var(--font-size-2xl);
}

h4, .h4 {
    font-size: var(--font-size-xl);
}

h5, .h5 {
    font-size: var(--font-size-lg);
}

h6, .h6 {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-secondary);
}

/* Link styles */
a {
    color: var(--color-text-link);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--color-text-link-hover);
    text-decoration: underline;
}

/* ===== ENHANCED COMPONENT STYLES ===== */

/* Logo and channel image enhancements */
.sports-channel-logo, 
.default-channel-logo {
    height: 33px;
    max-width: 90px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    transition: transform var(--transition-fast);
}

.sports-channel-logo:hover,
.default-channel-logo:hover {
    transform: scale(1.05);
}

/* Movie description with better typography */
.movie-description {
    max-width: 600px;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-secondary);
}

/* ===== UTILITY CLASSES ===== */

/* Text utilities */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-info { color: var(--color-info) !important; }
.text-muted { color: var(--color-text-secondary) !important; }
.text-light { color: var(--color-text-tertiary) !important; }

/* Background utilities */
.bg-surface { background-color: var(--color-surface) !important; }
.bg-surface-secondary { background-color: var(--color-surface-secondary) !important; }
.bg-surface-tertiary { background-color: var(--color-surface-tertiary) !important; }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow { box-shadow: var(--shadow-base) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }

/* Border radius utilities */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded { border-radius: var(--radius-base) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-2xl { border-radius: var(--radius-2xl) !important; }
.rounded-3xl { border-radius: var(--radius-3xl) !important; }

/* ===== RESPONSIVE DESIGN TOKENS ===== */

@media (max-width: 768px) {
    :root {
        --font-size-4xl: 2rem;      /* Scale down large text on mobile */
        --font-size-3xl: 1.5rem;
        --space-16: 2rem;           /* Reduce large spacing on mobile */
        --space-20: 3rem;
        --space-24: 4rem;
    }
}