@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Pixelify+Sans:wght@400..700&display=swap");
:root {
  /* ========== 60-30-10 COLOR SYSTEM ========== */

  /* 60% - Base Colors (Azul Escuro e Variações) - apenas as essenciais */
  --color-base-500: #64748b;
  --color-base-800: #1e293b;
  --color-base-900: #0f172a;

  /* Azul Principal (60% do design) - apenas as usadas */
  --color-primary-300: #93c5fd;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;

  /* 30% - Accent Colors (Sutis para informação) */
  --color-accent-blue: #60a5fa;
  --color-accent-teal: #5eead4;

  /* 10% - Accent Colors (Feedback e Ações) */
  --color-success-light: #dcfce7;
  --color-success-base: #22c55e;
  --color-success-dark: #16a34a;

  --color-warning-light: #fef3c7;
  --color-warning-base: #f59e0b;
  --color-warning-dark: #d97706;
  --color-warning-darker: #994708;

  --color-danger-light: #fee2e2;
  --color-danger-base: #ef4444;
  --color-danger-dark: #dc2626;

  /* ========== SEMANTIC TOKENS ========== */

  /* Backgrounds (60% - Azul Escuro Dominante) */
  --bg-primary: #0a0e1a; /* Fundo principal */
  --bg-secondary: #1a1f2e; /* Cards e seções */
  --bg-tertiary: #252a3a; /* Elementos elevados */
  --bg-subtle: #2a2f3f; /* Hover states suaves */

  /* Text Colors */
  --text-primary: #f8fafc; /* Texto principal */
  --text-secondary: #cbd5e1; /* Texto secundário */
  --text-muted: #64748b; /* Texto menos importante */
  --text-accent: var(--color-accent-teal); /* Destaques suaves */

  /* Interactive Elements (Minimalista) */
  --interactive-primary: var(--color-primary-600);
  --interactive-primary-hover: var(--color-primary-500);
  --interactive-subtle: var(--color-accent-blue);

  /* Feedback Colors (10% - Apenas quando necessário) */
  --feedback-success: var(--color-success-base);
  --feedback-success-bg: var(--color-success-light);
  --feedback-warning: var(--color-warning-base);
  --feedback-warning-bg: var(--color-warning-light);
  --feedback-danger: var(--color-danger-base);
  --feedback-danger-bg: var(--color-danger-light);

  /* Borders - Sutis */
  --border-primary: rgba(148, 163, 184, 0.2);
  --border-secondary: rgba(203, 213, 225, 0.1);
  --border-accent: var(--color-accent-teal);

  /* ========== MINIMAL VISUAL EFFECTS ========== */

  /* Apenas uma sombra sutil para elevação quando necessário */
  --shadow-subtle: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

  /* ========== TYPOGRAPHY ========== */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-xxl: 1.5rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;

  /* ========== SPACING & BORDERS ========== */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --border-width: 1px;
  --border-width-thick: 2px;

  /* Transições apenas quando necessário */
  --transition-base: var(--transition-standard);

  /* ========== UNIFIED TRANSITIONS ========== */
  --transition-standard: 0.15s ease-out;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;

  font-family: "Montserrat", sans-serif;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Pixelify Sans", sans-serif;
}

button {
  cursor: pointer;
  user-select: none;
  border: unset;
  background-color: unset;
  color: var(--text-primary);
  transition: var(--transition-standard);
}

button:active {
  transform: scale(0.95);
}

input {
  accent-color: var(--interactive-primary);
}