/* ============================================
   KV-Stream - CSS Variables
   PIXEL-PERFECT NETFLIX DESIGN TOKENS
   ============================================ */

:root {
    /* === Netflix Exact Color Palette === */
    --netflix-bg: #141414;
    --netflix-bg-card: #181818;
    --netflix-bg-elevated: #232323;
    --netflix-bg-header: rgba(20, 20, 20, 0);
    --netflix-bg-header-scrolled: rgba(20, 20, 20, 0.95);

    --netflix-red: #e50914;
    --netflix-red-hover: #f40612;
    --netflix-red-dark: #b20710;

    --netflix-text: #ffffff;
    --netflix-text-secondary: #b3b3b3;
    --netflix-text-muted: #8c8c8c;
    --netflix-text-dim: #666666;

    --netflix-green: #46d369;
    --netflix-border: rgba(255, 255, 255, 0.1);

    /* Legacy compatibility aliases */
    --color-bg-primary: var(--netflix-bg);
    --color-bg-secondary: var(--netflix-bg-card);
    --color-bg-tertiary: var(--netflix-bg-elevated);
    --color-bg-elevated: var(--netflix-bg-elevated);
    --color-bg-card: var(--netflix-bg-card);
    --color-text-primary: var(--netflix-text);
    --color-text-secondary: var(--netflix-text-secondary);
    --color-text-tertiary: var(--netflix-text-muted);
    --color-accent: var(--netflix-red);
    --color-border: var(--netflix-border);
    --apple-bg-primary: var(--netflix-bg);
    --apple-text-primary: var(--netflix-text);
    --apple-accent: var(--netflix-red);

    /* === Netflix Card Specifications === */
    --card-width-desktop: 200px;
    --card-width-tablet: 160px;
    --card-width-mobile: 110px;
    --card-aspect-ratio: 2 / 3;
    /* Portrait posters */
    --card-gap: 8px;
    --card-radius: 4px;
    --card-hover-scale: 1.3;
    --card-hover-delay: 300ms;

    /* === Netflix Layout Specifications === */
    --header-height: 68px;
    --header-height-mobile: 48px;
    --row-padding: 4%;
    --row-margin: 3vw;
    --mobile-nav-height: 56px;

    /* === Netflix Typography (Netflix Sans fallback) === */
    --font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-heading: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 32px;
    --font-size-hero: clamp(2rem, 4vw, 3.5rem);

    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.1;
    --line-height-normal: 1.4;
    --line-height-relaxed: 1.6;

    /* === Netflix Button Specs === */
    --btn-height: 42px;
    --btn-height-sm: 32px;
    --btn-radius: 4px;
    --btn-padding: 0 24px;

    /* === Netflix Shadows === */
    --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.7);
    --shadow-dropdown: 0 2px 10px rgba(0, 0, 0, 0.8);
    --shadow-header: 0 0 10px rgba(0, 0, 0, 0.5);

    /* === Netflix Transitions === */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-card: 300ms cubic-bezier(0.2, 0, 0.2, 1);
    --transition-hover-delay: 300ms;

    /* === Z-Index Scale === */
    --z-base: 0;
    --z-card: 10;
    --z-card-hover: 50;
    --z-row: 20;
    --z-header: 100;
    --z-dropdown: 150;
    --z-modal: 1000;
    --z-mobile-nav: 200;
}