/* ============================================================
   AMIGO SPANISH: DESIGN TOKENS
   Every color, font, spacing, and radius decision lives here.
   Nothing below this file should hardcode a raw hex value.
   ============================================================ */

:root {
  /* ---- Brand colors (true hex, never adjust these directly) ---- */
  --brand-blue: #0b5394;
  --brand-teal: #007783;
  --brand-pink: #da4c7a;

  /* ---- Light theme (Warm Touch: DECIDED) ---- */
  --color-bg: #fbf6ef;
  --color-surface: #fffdf9;
  --color-text: #2c2620;
  --color-text-muted: #6b5d4f;
  --color-border: #f0e4d3;
  --color-border-strong: #d8c9b3;

  --color-primary: var(--brand-blue);
  --color-secondary: var(--brand-teal);
  --color-accent: var(--brand-pink);
  --color-accent-soft: #fbe4ec;

  --picado-line: #c9b9a0;

  /* ---- Type scale ---- */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;

  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 2.75rem;    /* 44px */

  /* ---- Spacing scale (used for padding/margin/gap) ---- */
  --space-xs: 0.5rem;
  --space-sm: 0.875rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* ---- Radius & shadow ---- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 6px 18px rgba(43, 38, 32, 0.06);
  --shadow-md: 0 14px 40px rgba(43, 38, 32, 0.14);
  --shadow-accent: 0 6px 16px rgba(218, 76, 122, 0.30);

  /* ---- Layout ---- */
  --max-width: 1160px;
  --nav-height: 76px;
}

/* ---- Dark theme (true brand hex kept for large fills;
   only small text gets a lightened tint, see themes.css) ---- */
[data-theme="dark"] {
  --color-bg: #211b16;
  --color-surface: #2b241d;
  --color-text: #f7f1e8;
  --color-text-muted: #b8a892;
  --color-border: #3a3128;
  --color-border-strong: #4a4033;

  --color-primary: #6fb6ea;      /* small-text-only tint, buttons/fills use --brand-blue directly */
  --color-secondary: #2db5c1;    /* small-text-only tint */
  --color-accent: #e888a8;       /* small-text-only tint */
  --color-accent-soft: #3a2530;

  --picado-line: #4a4033;

  --shadow-sm: 0 8px 22px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 16px 44px rgba(0, 0, 0, 0.5);
  --shadow-accent: 0 8px 26px rgba(218, 76, 122, 0.45);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.2s ease, color 0.2s ease;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; }

/* ---- Visible keyboard focus (accessibility floor) ---- */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
}

/* ---- Respect reduced-motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}
@media (max-width: 800px) {
  .container { padding: 0 var(--space-md); }
}