/* ==========================================================================
   StatsGreen — Design Tokens & Component Utility Classes v1.0
   Design System Oficial: Dark & Light Theme Nativo
   ========================================================================== */

:root {
  /* ----- TEMA ESCURO PADRÃO (DARK MODE) ----- */
  --sg-bg-primary: #09090B;
  --sg-bg-secondary: #111315;

  /* Superfícies */
  --sg-surface: #18181B;
  --sg-surface-elevated: #27272A;
  --sg-surface-hover: #323236;

  /* Texto */
  --sg-text-primary: #FAFAFA;
  --sg-text-secondary: #A1A1AA;
  --sg-text-muted: #71717A;

  /* Marca Oficial (Verde) */
  --sg-brand: #22C55E;
  --sg-brand-dark: #15803D;
  --sg-brand-light: #4ADE80;
  --sg-brand-subtle: rgba(34, 197, 94, 0.12);
  --sg-brand-border: rgba(34, 197, 94, 0.28);

  /* Semânticas */
  --sg-info: #3B82F6;
  --sg-info-subtle: rgba(59, 130, 246, 0.12);
  --sg-info-border: rgba(59, 130, 246, 0.28);

  --sg-warning: #F97316;
  --sg-warning-subtle: rgba(249, 115, 22, 0.12);
  --sg-warning-border: rgba(249, 115, 22, 0.28);

  --sg-danger: #EF4444;
  --sg-danger-subtle: rgba(239, 68, 68, 0.12);
  --sg-danger-border: rgba(239, 68, 68, 0.28);

  --sg-purple: #8B5CF6;
  --sg-purple-subtle: rgba(139, 92, 246, 0.12);

  /* Bordas */
  --sg-border: #27272A;
  --sg-border-soft: #202326;
  --sg-border-default: 1px solid var(--sg-border);

  /* Sombras */
  --sg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --sg-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.30);
  --sg-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.35);
  --sg-shadow-4: 0 16px 40px rgba(0, 0, 0, 0.40);

  /* Overlay */
  --sg-overlay: rgba(0, 0, 0, 0.75);

  /* Tipografia: Famílias */
  --sg-font-logo: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --sg-font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --sg-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sg-font-data: 'JetBrains Mono', monospace;

  /* Tipografia: Escala */
  --sg-font-xs: 12px;
  --sg-font-sm: 14px;
  --sg-font-md: 16px;
  --sg-font-lg: 20px;
  --sg-font-xl: 28px;
  --sg-font-2xl: 40px;
  --sg-font-hero: clamp(38px, 5.5vw, 64px);

  /* Espaçamento (múltiplos de 4px) */
  --sg-space-1: 4px;
  --sg-space-2: 8px;
  --sg-space-3: 12px;
  --sg-space-4: 16px;
  --sg-space-6: 24px;
  --sg-space-8: 32px;
  --sg-space-12: 48px;
  --sg-space-16: 64px;

  /* Bordas (border-radius) */
  --sg-radius-sm: 6px;
  --sg-radius-md: 8px;
  --sg-radius-lg: 12px;
  --sg-radius-xl: 16px;
  --sg-radius-pill: 999px;

  /* Layout */
  --sg-max-width-landing: 1200px;
  --sg-max-width-app: 1440px;
  --sg-header-height: 64px;

  /* Acessibilidade e Transição */
  --sg-focus-ring: 2px solid var(--sg-brand);
  --sg-transition-fast: 150ms ease;
  --sg-transition-normal: 250ms ease;

  /* Aliases de Retrocompatibilidade */
  --bg-absolute: var(--sg-bg-primary);
  --surface-primary: var(--sg-surface);
  --surface-elevated: var(--sg-surface-elevated);
  --text-primary: var(--sg-text-primary);
  --text-secondary: var(--sg-text-secondary);
  --green-main: var(--sg-brand);
  --green-dark: var(--sg-brand-dark);
  --green-light: var(--sg-brand-light);
  --semantic-success: var(--sg-brand);
  --semantic-warning: var(--sg-warning);
  --semantic-error: var(--sg-danger);
  --semantic-info: var(--sg-info);
  --font-logo: var(--sg-font-logo);
  --font-ui: var(--sg-font-ui);
  --font-data: var(--sg-font-data);
  --radius-default: var(--sg-radius-lg);
  --border-default: 1px solid var(--sg-border);
}

/* ==========================================================================
   TEMA CLARO (LIGHT MODE)
   ========================================================================== */
:root[data-theme="light"] {
  --sg-bg-primary: #F4F4F5;
  --sg-bg-secondary: #FAFAFA;

  /* Superfícies */
  --sg-surface: #FFFFFF;
  --sg-surface-elevated: #E4E4E7;
  --sg-surface-hover: #D4D4D8;

  /* Texto - WCAG AA Contrast */
  --sg-text-primary: #18181B;
  --sg-text-secondary: #52525B;
  --sg-text-muted: #71717A;

  /* Marca Calibrada para Fundo Claro (Verde 600 para contraste >= 4.5:1) */
  --sg-brand: #16A34A;
  --sg-brand-dark: #15803D;
  --sg-brand-light: #22C55E;
  --sg-brand-subtle: rgba(22, 163, 74, 0.12);
  --sg-brand-border: rgba(22, 163, 74, 0.35);

  /* Semânticas Claras */
  --sg-info: #2563EB;
  --sg-info-subtle: rgba(37, 99, 235, 0.10);
  --sg-info-border: rgba(37, 99, 235, 0.28);

  --sg-warning: #EA580C;
  --sg-warning-subtle: rgba(234, 88, 12, 0.10);
  --sg-warning-border: rgba(234, 88, 12, 0.28);

  --sg-danger: #DC2626;
  --sg-danger-subtle: rgba(220, 38, 38, 0.10);
  --sg-danger-border: rgba(220, 38, 38, 0.28);

  --sg-purple: #7C3AED;
  --sg-purple-subtle: rgba(124, 58, 237, 0.10);

  /* Bordas */
  --sg-border: #E4E4E7;
  --sg-border-soft: #ECECEF;
  --sg-border-default: 1px solid var(--sg-border);

  /* Sombras Suaves */
  --sg-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);
  --sg-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --sg-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.10);
  --sg-shadow-4: 0 16px 40px rgba(0, 0, 0, 0.12);

  /* Overlay */
  --sg-overlay: rgba(0, 0, 0, 0.40);

  /* Aliases no tema claro */
  --bg-absolute: var(--sg-bg-primary);
  --surface-primary: var(--sg-surface);
  --surface-elevated: var(--sg-surface-elevated);
  --text-primary: var(--sg-text-primary);
  --text-secondary: var(--sg-text-secondary);
  --green-main: var(--sg-brand);
  --green-dark: var(--sg-brand-dark);
  --green-light: var(--sg-brand-light);
  --semantic-success: var(--sg-brand);
  --semantic-warning: var(--sg-warning);
  --semantic-error: var(--sg-danger);
  --semantic-info: var(--sg-info);
  --border-default: 1px solid var(--sg-border);
}

/* ==========================================================================
   Classes de Componentes e Utilitários Canônicos
   ========================================================================== */

/* Badges / Selos */
.sg-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--sg-radius-pill);
  line-height: 1.2;
  white-space: nowrap;
  transition: all var(--sg-transition-fast);
}

.sg-badge-brand {
  background-color: var(--sg-brand-subtle);
  color: var(--sg-brand);
  border: 1px solid var(--sg-brand-border);
}

.sg-badge-info {
  background-color: var(--sg-info-subtle);
  color: var(--sg-info);
  border: 1px solid var(--sg-info-border);
}

.sg-badge-warning {
  background-color: var(--sg-warning-subtle);
  color: var(--sg-warning);
  border: 1px solid var(--sg-warning-border);
}

.sg-badge-danger {
  background-color: var(--sg-danger-subtle);
  color: var(--sg-danger);
  border: 1px solid var(--sg-danger-border);
}

.sg-badge-neutral {
  background-color: var(--sg-surface-elevated);
  color: var(--sg-text-secondary);
  border: 1px solid var(--sg-border);
}

/* Botões Padrão */
.sg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--sg-font-ui);
  font-size: 0.88rem;
  font-weight: 600;
  border-radius: var(--sg-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--sg-transition-fast);
}

.sg-btn-primary {
  background-color: var(--sg-brand);
  color: #09090B;
  border-color: var(--sg-brand);
}

.sg-btn-primary:hover {
  background-color: var(--sg-brand-dark);
  border-color: var(--sg-brand-dark);
  color: #FAFAFA;
}

.sg-btn-secondary {
  background-color: transparent;
  color: var(--sg-text-primary);
  border: 1px solid var(--sg-border);
}

.sg-btn-secondary:hover {
  background-color: var(--sg-surface-elevated);
  border-color: var(--sg-text-secondary);
}

/* Tipografia Utilitária */
.font-heading { font-family: var(--sg-font-heading); }
.font-ui { font-family: var(--sg-font-ui); }
.font-data { font-family: var(--sg-font-data); }

/* Freemium Preview Banner (Global) */
.freemium-preview-banner {
  background-color: var(--sg-brand-subtle);
  border: 1px solid var(--sg-brand-border);
  border-radius: var(--sg-radius-lg);
  padding: 16px 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.freemium-preview-content {
  display: flex;
  align-items: center;
  gap: 12px;
}

.freemium-preview-content i,
.freemium-preview-content svg {
  color: var(--sg-brand);
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.freemium-preview-title {
  color: var(--sg-text-primary);
  font-size: 0.95rem;
  font-weight: 700;
}

.freemium-preview-text {
  color: var(--sg-text-secondary);
  font-size: 0.85rem;
  margin-top: 2px;
}

.freemium-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.freemium-btn-login {
  color: var(--sg-text-primary);
  background-color: var(--sg-surface-elevated);
  border: 1px solid var(--sg-border);
  padding: 8px 14px;
  border-radius: var(--sg-radius-md);
  font-size: 0.88rem;
  text-decoration: none;
  font-weight: 600;
  transition: all var(--sg-transition-fast);
}

.freemium-btn-login:hover {
  background-color: var(--sg-surface-hover);
  color: var(--sg-text-primary);
}