/* Variáveis CSS - Design System */

:root {
  /* ========================================
     CORES - PALETA JAMES BOND (CINEMATOGRÁFICA)
     ======================================== */

  /* Cores Primárias - Dourado Sofisticado */
  --cor-primaria: #DDBC65;
  --cor-primaria-escura: #C9A84F;
  --cor-primaria-clara: #E8CC7E;
  --cor-dourado: #DDBC65;
  --cor-dourado-brilho: #F0D98A;

  /* Cores Secundárias - Azul Escuro Profundo */
  --cor-secundaria: #04131F;
  --cor-secundaria-clara: #0A1F2E;
  --cor-secundaria-escura: #020A12;
  --cor-azul-profundo: #04131F;
  --cor-azul-escuro: #0A1F2E;

  /* Cor de Acento - Azul Vibrante */
  --cor-acento: #1020FF;
  --cor-acento-escura: #0D19CC;
  --cor-acento-clara: #3D4FFF;

  /* Cores Neutras */
  --cor-branca: #FFFFFF;
  --cor-cinza-claro: #F5F5F5;
  --cor-cinza-medio: #CCCCCC;
  --cor-cinza-escuro: #666666;

  /* Cores de Fundo */
  --cor-fundo-claro: #FFFFFF;
  --cor-fundo-escuro: #04131F;
  --cor-fundo-cinza: #F8F8F8;

  /* Cores de Texto */
  --cor-texto-principal: #1A1A1A;
  --cor-texto-secundario: #666666;
  --cor-texto-claro: #FFFFFF;

  /* Cores de Estado */
  --cor-sucesso: #4CAF50;
  --cor-erro: #F44336;
  --cor-alerta: #FF9800;

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

  /* Famílias de Fonte */
  --fonte-principal: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                     Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fonte-titulo: 'Outfit', system-ui, sans-serif;

  /* Tamanhos de Fonte - Mobile First (Base: 16px) */
  --fonte-xs: 0.75rem;      /* 12px */
  --fonte-sm: 0.875rem;     /* 14px */
  --fonte-base: 1rem;       /* 16px */
  --fonte-md: 1.125rem;     /* 18px */
  --fonte-lg: 1.25rem;      /* 20px */
  --fonte-xl: 1.5rem;       /* 24px */
  --fonte-2xl: 1.875rem;    /* 30px */
  --fonte-3xl: 2.25rem;     /* 36px */
  --fonte-4xl: 3rem;        /* 48px */

  /* Pesos de Fonte */
  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semibold: 600;
  --peso-bold: 700;
  --peso-extrabold: 800;

  /* Line Height */
  --altura-linha-compacta: 1.15;
  --altura-linha-normal: 1.6;
  --altura-linha-relaxada: 1.8;

  /* ========================================
     ESPAÇAMENTOS - Mobile First
     ======================================== */

  /* Espaçamentos Internos */
  --espacamento-2xs: 0.25rem;  /* 4px */
  --espacamento-xs: 0.5rem;    /* 8px */
  --espacamento-sm: 0.75rem;   /* 12px */
  --espacamento-md: 1rem;      /* 16px */
  --espacamento-lg: 1.5rem;    /* 24px */
  --espacamento-xl: 2rem;      /* 32px */
  --espacamento-2xl: 2.5rem;   /* 40px */
  --espacamento-3xl: 3rem;     /* 48px */
  --espacamento-4xl: 4rem;     /* 64px */
  --espacamento-5xl: 5rem;     /* 80px */

  /* Espaçamento de Seções */
  --espacamento-secao-mobile: 4rem;     /* 64px */
  --espacamento-secao-tablet: 5rem;     /* 80px */
  --espacamento-secao-desktop: 6rem;    /* 96px */

  /* ========================================
     LAYOUT
     ======================================== */

  /* Container */
  --container-mobile: 100%;
  --container-tablet: 720px;
  --container-desktop: 960px;
  --container-large: 1200px;
  --container-padding: var(--espacamento-md);

  /* Breakpoints */
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1440px;

  /* ========================================
     EFEITOS
     ======================================== */

  /* Border Radius */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  --radius-full: 9999px;

  /* Sombras */
  --sombra-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --sombra-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --sombra-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --sombra-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);

  /* Transições */
  --transicao-rapida: 150ms ease-in-out;
  --transicao-normal: 250ms ease-in-out;
  --transicao-lenta: 400ms ease-in-out;

  /* ========================================
     Z-INDEX
     ======================================== */

  --z-base: 1;
  --z-menu: 10;
  --z-dropdown: 100;
  --z-modal: 1000;
  --z-tooltip: 1100;
}

/* ========================================
   MEDIA QUERIES - Variáveis Responsivas
   ======================================== */

/* Tablet (768px+) */
@media (min-width: 768px) {
  :root {
    --fonte-base: 1.0625rem;   /* 17px */
    --fonte-md: 1.25rem;       /* 20px */
    --fonte-lg: 1.5rem;        /* 24px */
    --fonte-xl: 1.875rem;      /* 30px */
    --fonte-2xl: 2.25rem;      /* 36px */
    --fonte-3xl: 3rem;         /* 48px */
    --fonte-4xl: 3.75rem;      /* 60px */

    --container-padding: var(--espacamento-lg);
  }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  :root {
    --fonte-base: 1.125rem;    /* 18px */
    --fonte-md: 1.375rem;      /* 22px */
    --fonte-lg: 1.75rem;       /* 28px */
    --fonte-xl: 2.25rem;       /* 36px */
    --fonte-2xl: 3rem;         /* 48px */
    --fonte-3xl: 3.75rem;      /* 60px */
    --fonte-4xl: 4.5rem;       /* 72px */

    --container-padding: var(--espacamento-xl);
  }
}