/**
 * AdsX Premium Design System - Tipografia
 * 
 * Este arquivo define a tipografia premium usando a fonte Inter do Google Fonts
 * e classes tipográficas conforme o guia de design premium.
 * 
 * A fonte Inter é aplicada quando:
 * - [data-theme='dark'] está presente (dark mode)
 * - .adsx-premium está presente no elemento ou ancestrais
 */

/* ============================================
   IMPORTAÇÃO DA FONTE INTER
   ============================================ */

/* Importação via @import (alternativa ao link no HTML) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================
   APLICAÇÃO DA FONTE INTER
   ============================================ */

/* Aplicar Inter apenas em elementos de texto, NÃO em ícones */
[data-theme='dark'] body,
.adsx-premium body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Aplicar Inter em elementos de texto específicos */
[data-theme='dark'] p,
[data-theme='dark'] h1,
[data-theme='dark'] h2,
[data-theme='dark'] h3,
[data-theme='dark'] h4,
[data-theme='dark'] h5,
[data-theme='dark'] h6,
[data-theme='dark'] span:not(.material-icons):not(.material-symbols):not(.material-symbols-outlined),
[data-theme='dark'] div,
[data-theme='dark'] a,
[data-theme='dark'] button,
[data-theme='dark'] input,
[data-theme='dark'] textarea,
[data-theme='dark'] select,
[data-theme='dark'] label,
[data-theme='dark'] li,
[data-theme='dark'] td,
[data-theme='dark'] th,
.adsx-premium p,
.adsx-premium h1,
.adsx-premium h2,
.adsx-premium h3,
.adsx-premium h4,
.adsx-premium h5,
.adsx-premium h6,
.adsx-premium span:not(.material-icons):not(.material-symbols):not(.material-symbols-outlined),
.adsx-premium div,
.adsx-premium a,
.adsx-premium button,
.adsx-premium input,
.adsx-premium textarea,
.adsx-premium select,
.adsx-premium label,
.adsx-premium li,
.adsx-premium td,
.adsx-premium th {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ============================================
   CLASSES TIPOGRÁFICAS PREMIUM
   ============================================ */

/* Display Large (ex.: hero titles) */
.adsx-text-display {
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 3.5625rem; /* 57px */
  line-height: 4rem; /* 64px */
  color: var(--adsx-text-primary, #fafafa);
  letter-spacing: -0.02em;
}

/* Headline Medium (ex.: h1) */
.adsx-text-headline {
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 2.25rem; /* 36px */
  line-height: 2.75rem; /* 44px */
  color: var(--adsx-text-primary, #fafafa);
  letter-spacing: -0.01em;
}

/* Title Large (ex.: h2) */
.adsx-text-title-large {
  font-weight: 400; /* Regular */
  font-style: normal;
  font-size: 1.375rem; /* 22px */
  line-height: 1.75rem; /* 28px */
  color: var(--adsx-text-primary, #fafafa);
}

/* Headline Small (ex.: h3) */
.adsx-text-headline-small {
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 1.5rem; /* 24px */
  line-height: 2rem; /* 32px */
  color: var(--adsx-text-primary, #fafafa);
}

/* Title Medium (ex.: h4) */
.adsx-text-title-medium {
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
  color: var(--adsx-text-primary, #fafafa);
}

/* Title Small (ex.: h5, h6) */
.adsx-text-title-small {
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  color: var(--adsx-text-primary, #fafafa);
}

/* Body Large (ex.: parágrafos) */
.adsx-text-body-large {
  font-weight: 400; /* Regular */
  font-style: normal;
  font-size: 1rem; /* 16px */
  line-height: 1.5rem; /* 24px */
  color: var(--adsx-text-secondary, #a1a1aa);
}

/* Body Medium (ex.: listas, tabelas) */
.adsx-text-body-medium {
  font-weight: 400; /* Regular */
  font-style: normal;
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  color: var(--adsx-text-secondary, #a1a1aa);
}

/* Body Small */
.adsx-text-body-small {
  font-weight: 400; /* Regular */
  font-style: normal;
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
  color: var(--adsx-text-tertiary, #71717a);
}

/* Label Medium (ex.: labels de formulários) */
.adsx-text-label-medium {
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
  color: var(--adsx-text-primary, #fafafa);
}

/* Label Small */
.adsx-text-label-small {
  font-weight: 500; /* Medium */
  font-style: normal;
  font-size: 0.75rem; /* 12px */
  line-height: 1rem; /* 16px */
  color: var(--adsx-text-secondary, #a1a1aa);
}

/* ============================================
   PESOS DE FONTE (UTILITÁRIOS)
   ============================================ */

.adsx-font-light {
  font-weight: 300; /* Light - Texto de apoio secundário */
}

.adsx-font-regular {
  font-weight: 400; /* Regular - Texto corrido e labels */
}

.adsx-font-medium {
  font-weight: 500; /* Medium - Subtítulos, valores em tabelas e botões */
}

.adsx-font-semibold {
  font-weight: 600; /* Semi-Bold - KPIs, cabeçalhos de cards e títulos de seções */
}

.adsx-font-bold {
  font-weight: 700; /* Bold - Títulos principais e Logotipo */
}

/* ============================================
   CORES DE TEXTO (UTILITÁRIOS)
   ============================================ */

.adsx-text-color-primary {
  color: var(--adsx-text-primary, #fafafa);
}

.adsx-text-color-secondary {
  color: var(--adsx-text-secondary, #a1a1aa);
}

.adsx-text-color-tertiary {
  color: var(--adsx-text-tertiary, #71717a);
}

.adsx-text-color-disabled {
  color: var(--adsx-text-disabled, #52525b);
}

/* Cores semânticas para texto */
.adsx-text-color-success {
  color: var(--adsx-success, #10b981);
}

.adsx-text-color-info {
  color: var(--adsx-info, #3b82f6);
}

.adsx-text-color-warning {
  color: var(--adsx-warning, #f59e0b);
}

.adsx-text-color-danger {
  color: var(--adsx-danger, #ef4444);
}

.adsx-text-color-primary-brand {
  color: var(--adsx-primary, #8b5cf6);
}