/* ============================================================
   Impulso Digital GT — Design tokens
   Ver STYLESEED.md para las decisiones de diseño y su razón.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root {
  /* --- Accent teal de marca (muestreado de los logos oficiales) --- */
  --brand-50:  #E6F7F5;
  --brand-100: #C4EDE8;
  --brand-300: #00C0B0;   /* teal brillante del logo — SOLO sobre fondos oscuros */
  --brand-500: #009E90;   /* teal decorativo / elementos grandes */
  --brand-600: #00857A;   /* teal seguro para texto blanco (botones) */
  --brand-700: #006B62;   /* teal para texto de acento sobre claro */

  /* --- Semántico (reservado, no mezclar con accent) --- */
  --success-500: #297346;
  --success-tint: #E3F1E8;
  --warning-500: #B5790C;
  --warning-tint: #FBF0DD;
  --danger-500:  #B3261E;
  --danger-tint: #FBE9E7;

  /* --- Neutros con tinte teal-navy (marca fría; nunca negro/blanco puro) --- */
  --ink-900: #0E3A38;   /* teal-navy profundo (del "D" e "Impulso" del logo) */
  --ink-700: #2A5050;   /* secundario (= .ls del logo) */
  --ink-500: #52706E;   /* terciario */
  --ink-300: #A9C0BD;
  --paper:   #F4FAF9;   /* off-white con leve tinte teal */
  --cream:   #E8F4F2;   /* superficie sutil */
  --line:    #D5E8E5;
  --line-2:  #B8D6D1;
  --card:    #FFFFFF;

  /* --- Semantic tokens usados en todo el sitio --- */
  --bg-page:        var(--paper);
  --bg-card:        var(--card);
  --bg-subtle:      var(--cream);
  --bg-brand-tint:  var(--brand-50);
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-700);
  --text-tertiary:  var(--ink-500);
  --text-on-brand:  #FFFFFE;
  --border:         var(--line);
  --border-strong:  var(--line-2);
  --focus:          var(--brand-600);

  /* --- Tipografía --- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Radio: personalidad "soft", una sola escala --- */
  --r-control: 9px;
  --r-card:    16px;
  --r-panel:   11px;
  --r-pill:    999px;

  /* --- Sombras: capas suaves, tinte teal, nunca negro puro --- */
  --sh-sm: 0 1px 2px rgba(14,58,56,.06), 0 1px 4px rgba(0,133,122,.05);
  --sh-md: 0 4px 12px rgba(14,58,56,.08), 0 2px 6px rgba(0,133,122,.06);
  --sh-lg: 0 10px 30px rgba(14,58,56,.12), 0 4px 12px rgba(0,133,122,.06);

  /* --- Motion: seed "Silk" — suave, sin rebote --- */
  --dur-fast:   120ms;
  --dur-normal: 220ms;
  --dur-slow:   380ms;
  --ease-silk: cubic-bezier(.32,.08,.24,1);

  /* --- Grid base 8px --- */
  --container: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* En oscuro el accent salta al teal brillante del logo */
    --brand-500: #00C0B0;
    --brand-600: #00C0B0;
    --brand-700: #35D4C6;
    --ink-900: #EAF6F4;
    --ink-700: #B9D2CE;
    --ink-500: #86A5A1;
    --ink-300: #4C6B68;
    --paper: #0C2523;
    --cream: #123330;
    --line:  #1E3E3B;
    --line-2:#2C504C;
    --card:  #123330;
    --bg-brand-tint: #10403A;
    --success-tint: #12261A;
    --warning-tint: #2A2213;
    --danger-tint:  #2A1613;
    --sh-sm: 0 1px 2px rgba(0,0,0,.4);
    --sh-md: 0 4px 12px rgba(0,0,0,.45);
    --sh-lg: 0 10px 30px rgba(0,0,0,.5);
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}