/**
 * ================================================================
 * VELRA IPTV - CSS VARIABLES
 * ================================================================
 * 
 * Unified CSS Variables combining:
 * - Velra Brand Theme (Gold-Green Gradient)
 * - Samsung Smart TV Design Guidelines
 * 
 * Target: 1920x1080 (Full HD) displays
 * Viewing distance: 3 meters (10 feet)
 * 
 * Reference: DOC/TV_UI_DESIGN_GUIDELINES.md
 * ================================================================
 */

:root {
  /* ============================================
     VELRA BRAND COLORS
     ============================================ */
  
  /* Primary Brand - Yellow-Green Gradient */
  --velra-gold: #D4A84B;
  --velra-gold-light: #E8C56D;
  --velra-gold-dark: #B8923F;
  --velra-green: #4A7C3F;
  --velra-green-dark: #1E3D1A;
  --velra-green-light: #6B9E23;
  --velra-green-mid: #8FB83A;
  
  /* Brand Gradients */
  --velra-gradient: linear-gradient(135deg, #D4A84B 0%, #8FB83A 50%, #4A7C3F 100%);
  --velra-gradient-hover: linear-gradient(135deg, #E8C56D 0%, #9DC844 50%, #5A8C4F 100%);
  --velra-gradient-subtle: linear-gradient(135deg, rgba(212, 168, 75, 0.3) 0%, rgba(143, 184, 58, 0.3) 50%, rgba(74, 124, 63, 0.3) 100%);
  
  /* ============================================
     BACKGROUND COLORS
     ============================================ */
  
  /* Dark Theme (Velra) */
  --color-bg-primary: #0D1810;
  --color-bg-secondary: #121A14;
  --color-bg-tertiary: #1A241C;
  --color-bg-elevated: #222E24;
  
  /* Cards & Surfaces */
  --color-bg-card: rgba(13, 24, 16, 0.6);
  --color-bg-card-hover: rgba(13, 24, 16, 0.8);
  --color-bg-card-solid: #1A241C;
  
  /* Overlays */
  --color-bg-overlay: rgba(13, 24, 16, 0.85);
  --color-bg-overlay-light: rgba(13, 24, 16, 0.6);
  --color-bg-glass: rgba(30, 40, 35, 0.85);
  
  /* ============================================
     TEXT COLORS
     ============================================ */
  
  --color-text-primary: #FFFFFF;
  --color-text-secondary: rgba(255, 255, 255, 0.8);
  --color-text-tertiary: rgba(255, 255, 255, 0.6);
  --color-text-muted: rgba(255, 255, 255, 0.5);
  --color-text-disabled: rgba(255, 255, 255, 0.3);
  --color-text-inverse: #0D1810;
  
  /* Accent Text */
  --color-text-accent: var(--velra-gold);
  --color-text-success: #44BB44;
  --color-text-warning: #FFB800;
  --color-text-error: #FF4444;
  
  /* ============================================
     ACCENT & STATUS COLORS
     ============================================ */
  
  /* Primary Accent (Velra Gold) */
  --color-accent: var(--velra-gold);
  --color-accent-light: var(--velra-gold-light);
  --color-accent-dark: var(--velra-gold-dark);
  --color-accent-bg: rgba(212, 168, 75, 0.15);
  
  /* Secondary Accent (Velra Green) */
  --color-secondary: var(--velra-green);
  --color-secondary-light: var(--velra-green-light);
  --color-secondary-dark: var(--velra-green-dark);
  --color-secondary-bg: rgba(74, 124, 63, 0.15);
  
  /* Status Colors */
  --color-success: #44BB44;
  --color-success-bg: rgba(68, 187, 68, 0.15);
  --color-warning: #FFB800;
  --color-warning-bg: rgba(255, 184, 0, 0.15);
  --color-error: #FF4444;
  --color-error-bg: rgba(255, 68, 68, 0.15);
  --color-info: #0099FF;
  --color-info-bg: rgba(0, 153, 255, 0.15);
  
  /* ============================================
     FOCUS COLORS (TV Guidelines)
     ============================================ */
  
  --color-focus: var(--velra-gold);
  --color-focus-glow: rgba(212, 168, 75, 0.4);
  --color-focus-ring: rgba(212, 168, 75, 0.6);
  --color-focus-green-glow: rgba(143, 184, 58, 0.4);
  
  /* ============================================
     BORDER COLORS
     ============================================ */
  
  --color-border: rgba(255, 255, 255, 0.1);
  --color-border-light: rgba(255, 255, 255, 0.05);
  --color-border-strong: rgba(255, 255, 255, 0.2);
  --color-border-focus: var(--velra-gold);
  
  /* ============================================
     TYPOGRAPHY (Samsung TV Guidelines)
     ============================================ */
  
  /* Font Family */
  --font-family-primary: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'Consolas', 'Monaco', monospace;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  
  /* Font Sizes (1920x1080) - Minimum 18px for TV */
  --font-size-title-xl: 72px;      /* Large titles, hero text */
  --font-size-title-lg: 56px;      /* Page titles */
  --font-size-title: 48px;         /* Section titles */
  --font-size-title-sm: 40px;      /* Subsection titles */
  --font-size-body-lg: 36px;       /* Large body, card titles */
  --font-size-body: 28px;          /* Default body text */
  --font-size-body-sm: 24px;       /* Small body, descriptions */
  --font-size-caption: 22px;       /* Captions, metadata */
  --font-size-caption-sm: 20px;    /* Small captions */
  --font-size-min: 18px;           /* MINIMUM readable size on TV */
  
  /* Font Weights (Samsung One UI) */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line Heights */
  --line-height-tight: 1.2;        /* Titles */
  --line-height-normal: 1.3;       /* Body text */
  --line-height-relaxed: 1.4;      /* Long text blocks */
  --line-height-loose: 1.5;        /* Extra spacing */
  
  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.02em;
  --letter-spacing-wider: 0.05em;
  
  /* ============================================
     SPACING SCALE
     ============================================ */
  
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  
  /* Semantic Spacing */
  --space-xs: var(--space-8);
  --space-sm: var(--space-16);
  --space-md: var(--space-24);
  --space-lg: var(--space-40);
  --space-xl: var(--space-64);
  
  /* Grid Gaps (use margins for TV compatibility) */
  --grid-gap-sm: 16px;
  --grid-gap-md: 24px;
  --grid-gap-lg: 32px;
  --grid-gap-xl: 48px;
  
  /* ============================================
     SAFE ZONES (1920x1080)
     Samsung TV Design Guidelines
     ============================================ */
  
  /* Action Safe Area (5% from edges) */
  --safe-action-h: 96px;           /* Horizontal: 1920 * 0.05 */
  --safe-action-v: 54px;           /* Vertical: 1080 * 0.05 */
  
  /* Title Safe Area (10% from edges) */
  --safe-title-h: 192px;           /* Horizontal: 1920 * 0.10 */
  --safe-title-v: 108px;           /* Vertical: 1080 * 0.10 */
  
  /* ============================================
     COMPONENT SIZES
     ============================================ */
  
  /* Buttons */
  --button-height-sm: 44px;
  --button-height-md: 56px;
  --button-height-lg: 72px;
  --button-padding-h: 32px;
  --button-padding-h-sm: 24px;
  --button-min-width: 120px;
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* Cards */
  --card-radius: var(--radius-lg);
  --card-radius-sm: var(--radius-md);
  --card-radius-lg: var(--radius-xl);
  --card-padding: var(--space-24);
  --card-padding-sm: var(--space-16);
  --card-padding-lg: var(--space-32);
  
  /* List Items */
  --list-item-height: 72px;
  --list-item-height-sm: 56px;
  --list-item-height-lg: 88px;
  --list-item-padding-h: 24px;
  
  /* Thumbnails (16:9 ratio) */
  --thumb-lg-width: 440px;
  --thumb-lg-height: 248px;
  --thumb-md-width: 320px;
  --thumb-md-height: 180px;
  --thumb-sm-width: 240px;
  --thumb-sm-height: 135px;
  --thumb-xs-width: 160px;
  --thumb-xs-height: 90px;
  
  /* Posters (2:3 ratio) */
  --poster-lg-width: 240px;
  --poster-lg-height: 360px;
  --poster-md-width: 180px;
  --poster-md-height: 270px;
  --poster-sm-width: 150px;
  --poster-sm-height: 225px;
  
  /* Channel Logos */
  --logo-lg-width: 120px;
  --logo-lg-height: 80px;
  --logo-md-width: 80px;
  --logo-md-height: 53px;
  --logo-sm-width: 60px;
  --logo-sm-height: 40px;
  
  /* Icons */
  --icon-xl: 56px;
  --icon-lg: 48px;
  --icon-md: 32px;
  --icon-sm: 24px;
  --icon-xs: 20px;
  
  /* Input Fields */
  --input-height: 56px;
  --input-padding-h: 20px;
  --input-radius: var(--radius-md);
  
  /* ============================================
     FOCUS STYLES (TV Guidelines)
     ============================================ */
  
  --focus-border-width: 4px;
  --focus-scale: 1.05;
  --focus-outline-offset: 4px;
  
  /* ============================================
     ANIMATIONS & TRANSITIONS
     ============================================ */
  
  /* Durations */
  --duration-fast: 0.15s;
  --duration-normal: 0.2s;
  --duration-slow: 0.3s;
  --duration-slower: 0.4s;
  
  /* Easing */
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Composite Transitions */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-normal: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);
  
  /* Specific Transitions */
  --transition-focus: transform var(--duration-fast) var(--ease-out), 
                      box-shadow var(--duration-fast) var(--ease-out);
  --transition-opacity: opacity var(--duration-normal) var(--ease-out);
  --transition-color: color var(--duration-fast) var(--ease-out), 
                      background-color var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  
  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  
  --z-base: 1;
  --z-above: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 1100;
  --z-tooltip: 1200;
  
  /* ============================================
     SHADOWS
     ============================================ */
  
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  
  /* Focus Shadows (Velra Brand) */
  --shadow-focus: 0 0 20px var(--color-focus-glow);
  --shadow-focus-strong: 0 0 30px var(--color-focus-glow);
  --shadow-glow: 0 0 40px rgba(212, 168, 75, 0.3);
  --shadow-green-glow: 0 0 40px rgba(143, 184, 58, 0.4);
  
  /* ============================================
     SCROLLBAR
     ============================================ */
  
  --scrollbar-width: 6px;
  --scrollbar-track: rgba(255, 255, 255, 0.03);
  --scrollbar-thumb: rgba(255, 255, 255, 0.3);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.5);
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* 1366px (HD Ready) */
@media (max-width: 1366px) {
  :root {
    /* Reduced spacing */
    --space-lg: 32px;
    --space-xl: 48px;
    
    /* Smaller fonts */
    --font-size-title-xl: 56px;
    --font-size-title-lg: 44px;
    --font-size-title: 38px;
    --font-size-title-sm: 32px;
    --font-size-body-lg: 28px;
    --font-size-body: 24px;
    --font-size-body-sm: 20px;
    --font-size-caption: 18px;
    
    /* Smaller safe zones */
    --safe-action-h: 68px;
    --safe-action-v: 38px;
    --safe-title-h: 136px;
    --safe-title-v: 76px;
    
    /* Smaller thumbnails */
    --thumb-lg-width: 360px;
    --thumb-lg-height: 202px;
    --thumb-md-width: 280px;
    --thumb-md-height: 158px;
  }
}

/* 1920px (Full HD) - Default values above */

/* 3840px (4K UHD) */
@media (min-width: 3840px) {
  :root {
    /* Increased spacing */
    --space-lg: 60px;
    --space-xl: 100px;
    
    /* Larger fonts */
    --font-size-title-xl: 120px;
    --font-size-title-lg: 96px;
    --font-size-title: 80px;
    --font-size-title-sm: 64px;
    --font-size-body-lg: 56px;
    --font-size-body: 44px;
    --font-size-body-sm: 36px;
    --font-size-caption: 32px;
    --font-size-caption-sm: 28px;
    --font-size-min: 24px;
    
    /* Larger safe zones */
    --safe-action-h: 192px;
    --safe-action-v: 108px;
    --safe-title-h: 384px;
    --safe-title-v: 216px;
    
    /* Larger thumbnails */
    --thumb-lg-width: 880px;
    --thumb-lg-height: 496px;
    --thumb-md-width: 640px;
    --thumb-md-height: 360px;
    
    /* Larger components */
    --button-height-sm: 72px;
    --button-height-md: 96px;
    --button-height-lg: 120px;
    --icon-xl: 96px;
    --icon-lg: 80px;
    --icon-md: 56px;
    --icon-sm: 40px;
  }
}