/* brand.css — Tokens del DESIGN SYSTEM de IslaBooks para las páginas del BORDE (públicas/auth).
 * v1.19.99 (#4 del plan de endurecimiento) — FUENTE ÚNICA de marca para landing, planes, signup,
 * signup-success, reset-password, verify-email, inicio-beta y admin. Antes cada una redefinía sus
 * propios colores/fuente/botones → hasta 6 "dialectos" visuales del mismo producto (hallazgo del
 * auditor de UX). Estos tokens son los MISMOS que styles.css (:root) del app logado, así el usuario
 * ve la misma marca de la landing al login al dashboard.
 *
 * Se enlaza ANTES del <style> inline de cada página, así sus reglas pueden referenciar var(--accent),
 * var(--radius), var(--font), etc. (las custom properties cascadean a todo el CSS posterior).
 * NO impone layout: solo define tokens + clases de botón canónicas. */

:root {
  /* Marca */
  --accent: #0d9488;          /* teal IslaBooks */
  --accent-hover: #0f766e;
  --accent-deep: #065f46;
  --accent-soft: #f0fdfa;
  /* Texto y superficies */
  --ink: #111827;
  --muted: #6b7280;
  --line: #dfe3e8;
  --line2: #f1f3f5;
  --bg: #f4f6f8;
  --panel: #ffffff;
  /* Estados */
  --ok: #059669;
  --warn: #d97706;
  --danger: #dc2626;
  /* Forma */
  --radius: 10px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);
  --shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
  --shadow-md: 0 4px 8px -1px rgba(0, 0, 0, .08), 0 2px 4px -2px rgba(0, 0, 0, .06);
  /* Tipografía — Inter (cargada vía Google Fonts en cada página, igual que el app) */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Botones canónicos — mismo gradiente, radio y peso que el .btn del app logado.
 * Las páginas que ya definen .btn-primary/.btn-secondary/.btn pueden migrar a estas o
 * referenciar los tokens de arriba (var(--accent)/var(--radius)). */
.brand-btn,
.brand-btn-primary {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .7rem 1.4rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 2px 6px rgba(13, 148, 136, .25);
}
.brand-btn:hover,
.brand-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, .3);
}
.brand-btn-secondary {
  display: inline-block;
  background: #fff;
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius);
  padding: .7rem 1.4rem;
  font-family: var(--font);
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background .15s;
}
.brand-btn-secondary:hover { background: var(--accent-soft); }

/* Foco de teclado visible — coherente con el app (#3 a11y). */
.brand-btn:focus-visible,
.brand-btn-primary:focus-visible,
.brand-btn-secondary:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}