/* =====================================================
   🎬 UaiCine Design System - Variables
   ===================================================== */

:root {

    /* ============================= */
    /* 🎨 CORES BASE                */
    /* ============================= */

--color-bg-main: #0F0F0F;

--color-bg-card: #171818;

--color-text-primary: #F9F9F9;

--color-text-secondary: #B5B5B5;

--color-primary: #F86418;

--color-primary-hover: #C2410C;

--color-border: #222222;

--color-bg-btn-player: linear-gradient(180deg, #F86418 0%, #FFC400 100%);

    /* ============================= */
    /* 🔤 TIPOGRAFIA                 */
    /* ============================= */

--font-family-base: 'Inter', sans-serif;

--font-xs: 0.8125rem;   /* 13px */

--font-sm: 0.875rem;    /* 14px */

--font-md: 0.9375rem;   /* 15px */

--font-base: 1rem;      /* 16px */

--font-lg: 1.125rem;    /* 18px */

--font-xl: 1.5rem;      /* 24px */
    
    /* ============================= */
    /* 📏 ESPAÇAMENTO                */
    /* ============================= */

--space-1: 4px;

--space-2: 8px;

--space-3: 12px;

--space-4: 16px;

--space-5: 20px;

--space-6: 24px;

--space-7: 32px;

    /* ============================= */
    /* 🔲 BORDER RADIUS              */
    /* ============================= */

--radius-sm: 6px;

--radius-md: 10px;

--radius-lg: 16px;

    /* ============================= */
    /* ⚡ TRANSIÇÃO PADRÃO           */
    /* ============================= */

--transition-default: all 0.2s ease;

    /* ============================= */
    /* 🎨 ICON FILTER COLORS        */
    /* ============================= */

--icon-star: invert(80%) sepia(21%) saturate(4074%) hue-rotate(360deg) brightness(102%) contrast(101%);

--icon-favorite: invert(80%) sepia(21%) saturate(4074%) hue-rotate(360deg) brightness(102%) contrast(101%);

--icon-watched: invert(81%) sepia(99%) saturate(2566%) hue-rotate(80deg) brightness(101%) contrast(104%);

--icon-muted: brightness(0) invert(65%);



    /* =====================================================
   👤 PROFILE TOKENS
   ===================================================== */

    /* Avatar */

--profile-avatar-size: 80px;

    /* Username */

--profile-username-size: var(--font-sm);

    /* Bio */

--profile-bio-size: var(--font-sm);

--profile-bio-color: var(--color-text-secondary);

    /* Stats */

--profile-stat-number-size: var(--font-base);

--profile-stat-label-size: var(--font-xs);

    /* Botões */

--profile-btn-height: 44px;

--profile-btn-radius: 999px;

    /* Tabs */

--profile-tab-height: 48px;

    /* Espaçamento */

--profile-spacing-top: var(--space-6);

--profile-spacing-section: 22px;


    /* =====================================================
   🎨 ICON FILTERS (GLOBAL)
   ===================================================== */

--icon-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(102%) contrast(102%);






    /* ========================= */
    /* 🏷 TITLES */
    /* ========================= */
    --auth-title-color: #F9F9F9;

    /* ========================= */
    /* 🔤 TEXT BASE */
    /* ========================= */
    --auth-text-color: #A7ACB3;

    /* ========================= */
    /* ✨ PLACEHOLDER */
    /* ========================= */
    --auth-placeholder-color: #A7ACB3;

    /* ========================= */
    /* 🔘 BUTTON */
    /* ========================= */
    --auth-primary-color: #F85909;

    /* ========================= */
    /* 🧩 INPUT */
    /* ========================= */
    --auth-input-bg: #0C0F12;
    --auth-input-border: #293036;

    /* ========================= */
    /* ❌ ERROR */
    /* ========================= */
    --auth-error-color: #FF5D5D;

    --color-poster-placeholder: #161717;


}