/* ========== COLORS (light) ========== */
:root {
  /* Definições base HSL */
  --primary-h: 210;
  --primary-s: 76%;
  --primary-l: 22%;
  --secondary-h: 6;
  --secondary-s: 78%;
  --secondary-l: 57%;

  /* Paleta Primária (geralmente tons mais escuros para texto/fundos) */
  --primary-100: hsl(
    var(--primary-h) var(--primary-s) calc(var(--primary-l) + 52%)
  );
  --primary-200: hsl(
    var(--primary-h) var(--primary-s) calc(var(--primary-l) + 44%)
  );
  --primary-300: hsl(
    var(--primary-h) var(--primary-s) calc(var(--primary-l) + 36%)
  );
  --primary-400: hsl(
    var(--primary-h) var(--primary-s) calc(var(--primary-l) + 24%)
  );
  --primary-500: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
  --primary-600: hsl(
    var(--primary-h) var(--primary-s) calc(var(--primary-l) - 6%)
  );
  --primary-700: hsl(
    var(--primary-h) var(--primary-s) calc(var(--primary-l) - 12%)
  );
  --primary-800: hsl(
    var(--primary-h) var(--primary-s) calc(var(--primary-l) - 18%)
  );
  --primary-900: hsl(
    var(--primary-h) var(--primary-s) calc(var(--primary-l) - 24%)
  );

  /* Paleta Secundária */
  --secondary-100: hsl(
    var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) + 40%)
  );
  --secondary-200: hsl(
    var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) + 32%)
  );
  --secondary-300: hsl(
    var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) + 24%)
  );
  --secondary-400: hsl(
    var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) + 12%)
  );
  --secondary-500: hsl(
    var(--secondary-h) var(--secondary-s) var(--secondary-l)
  );
  --secondary-600: hsl(
    var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - 6%)
  );
  --secondary-700: hsl(
    var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - 12%)
  );
  --secondary-800: hsl(
    var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - 18%)
  );
  --secondary-900: hsl(
    var(--secondary-h) var(--secondary-s) calc(var(--secondary-l) - 24%)
  );

  /* Paleta Cinza */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ========== VARIÁVEIS SEMÂNTICAS (Light Theme) ========== */
  --surface: #ffffff;
  --surface-muted: var(--gray-50);
  --border: var(--gray-200);
  --text: var(--gray-900);
  --text-muted: var(--gray-500);
  --text-on-accent: #ffffff;

  /* Cores de Acento */
  --primary-accent: var(--primary-600);
  --primary-accent-hover: var(--primary-700);
  --secondary-accent: var(--secondary-600);
  --secondary-accent-hover: var(--secondary-700);

  /* Cores de Componentes */
  --component-bg: var(--gray-100);
  --component-border: var(--gray-200);
}

/* ========== COLORS (dark) ========== */
.dark {
  /* Paleta Primária (tons mais claros para contraste no escuro) */
  --primary-100: hsl(var(--primary-h) 15% 95%);
  --primary-200: hsl(var(--primary-h) 25% 85%);
  --primary-300: hsl(var(--primary-h) 35% 75%);
  --primary-400: hsl(var(--primary-h) 45% 65%);
  --primary-500: hsl(var(--primary-h) 55% 55%);
  --primary-600: hsl(var(--primary-h) 65% 50%);
  --primary-700: hsl(var(--primary-h) 75% 45%);
  --primary-800: hsl(var(--primary-h) 85% 40%);
  --primary-900: hsl(var(--primary-h) 95% 35%);

  /* Paleta Secundária (tons mais claros) */
  --secondary-300: hsl(var(--secondary-h) 40% 70%);
  --secondary-400: hsl(var(--secondary-h) 50% 60%);
  --secondary-500: hsl(var(--secondary-h) 60% 50%);
  --secondary-600: hsl(var(--secondary-h) 70% 45%);

  /* ========== VARIÁVEIS SEMÂNTICAS (Dark Theme) ========== */
  --surface: #0b1220;
  --surface-muted: #0f172a;
  --border: var(--gray-800);
  --text: #e6eaf2;
  --text-muted: #9aa4b2;
  --text-on-accent: #ffffff;

  /* Cores de Acento */
  --primary-accent: var(--primary-500);
  --primary-accent-hover: var(--primary-400);
  --secondary-accent: var(--secondary-500);
  --secondary-accent-hover: var(--secondary-400);

  /* Cores de Componentes */
  --component-bg: var(--gray-800);
  --component-border: var(--gray-700);
}