/* ========================================
   Reset
======================================== */
html,
* {
  padding: 0;
  margin: 0;
}

/* ========================================
   🎨 Tema base (variables generales)
======================================== */
:root {
  /* Brand base */
  --color-primary: #7aa1dd;
  --color-secondary: #636a86;
  --color-background-dark: #2a2e39;

  /* Tonos derivados del primary */
  --primary-50: #eef5fd;
  --primary-100: #d6e5fa;
  --primary-200: #b3d1f4;
  --primary-300: #8fbdee;
  --primary-400: #6ca9e8;
  --primary-500: #4a94e2;
  --primary-600: #3b76b5;
  --primary-700: #2c5887;
  --primary-800: #1d3a59;
  --primary-900: #0e1c2c;

  /* Tonos del secondary */
  --secondary-50: #f3f4f7;
  --secondary-100: #dcdfe6;
  --secondary-200: #b9bdcd;
  --secondary-300: #979bb5;
  --secondary-400: #74799c;
  --secondary-500: #525783;
  --secondary-600: #414566;
  --secondary-700: #313449;
  --secondary-800: #20222b;
  --secondary-900: #101115;
}

/* ========================================
   🌞 Tema Claro
======================================== */
.theme-light {
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-surface: #f4f6fa;
  --color-border: #dce3ee;

  --button-bg: var(--primary-500);
  --button-text: #ffffff;
  --button-hover: var(--primary-600);
}

/* ========================================
   🌚 Tema Oscuro
======================================== */
.theme-dark {
  --color-bg: #2a2e39;
  --color-text: #f0f4f8;
  --color-surface: #373b47;
  --color-border: #4e5467;

  --button-bg: var(--primary-400);
  --button-text: #ffffff;
  --button-hover: var(--primary-300);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100vw;
  height: 100vh;
}

p {
  margin: 1.2em;
  font-size: 1em;
}

body p:nth-child(2) {
  align-self: center;
  font-size: 2em;
}

body p:nth-child(3) {
  align-self: self-end;
  font-size: 1em;
}