/* SEVENTY7 · tokens de diseño (fuente: docs/SEVENTY7 App Design System.html · S7-DSN-02).
   Importar una vez: <link rel="stylesheet" href="/brand/tokens.css"> */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@400;500;600;700;800&display=swap');

:root {
  /* Marca */
  --s7-red: #CE151D;      /* primario · acciones · error */
  --s7-blue: #0259DE;     /* secundario · pago · el "7" del logo */
  --s7-yellow: #FEBD19;   /* acento */
  --s7-coral: #FF6647;    /* secundario opcional */

  /* Neutros */
  --s7-ink: #14161D;
  --s7-muted: #5B6072;
  --s7-subtle: #8A8FA0;   /* placeholder */
  --s7-faint: #9AA0B4;    /* iconos inactivos */
  --s7-disabled: #A9ADBA;
  --s7-control: #CFD3DE;
  --s7-line: #E4E6EE;
  --s7-soft: #EEF0F6;
  --s7-bg: #F3F4F8;
  --s7-surface: #FFFFFF;

  /* Estado */
  --s7-success: #1A9D63;  --s7-success-bg: rgba(26,157,99,.14);
  --s7-warning: #C98A00;  --s7-warning-text: #A76F00;  --s7-warning-bg: rgba(201,138,0,.16);
  --s7-error: #CE151D;    --s7-error-bg: rgba(206,21,29,.13);
  --s7-focus: 0 0 0 3px rgba(206,21,29,.16);

  /* Tipografía */
  --s7-font-display: 'Anton', Impact, sans-serif;     /* siempre MAYÚSCULAS, line-height .92 */
  --s7-font-text: 'Poppins', system-ui, sans-serif;

  --s7-fs-display: 44px;  --s7-fs-h1: 34px;  --s7-fs-h2: 24px;
  --s7-fs-title: 20px;    --s7-fs-body: 15px; --s7-fs-small: 13px;
  --s7-fs-label: 12px;    --s7-fs-caption: 11px;

  /* Espaciado, radios, sombras */
  --s7-space-1: 4px; --s7-space-2: 8px; --s7-space-3: 12px;
  --s7-space-4: 16px; --s7-space-5: 24px; --s7-space-6: 32px;
  --s7-radius-control: 10px; --s7-radius-card: 12px; --s7-radius-panel: 14px; --s7-radius-pill: 999px;
  --s7-shadow-sm: 0 1px 2px rgba(20,22,29,.06), 0 4px 12px rgba(20,22,29,.05);
  --s7-shadow-card: 0 1px 2px rgba(20,22,29,.05), 0 8px 22px rgba(20,22,29,.05);
  --s7-shadow-md: 0 1px 2px rgba(20,22,29,.06), 0 12px 30px rgba(20,22,29,.10);
  --s7-shadow-cta: 0 8px 20px rgba(206,21,29,.35);
}

/* Clases de texto */
.s7-display { font: 400 var(--s7-fs-display)/.92 var(--s7-font-display); text-transform: uppercase; }
.s7-h1      { font: 400 var(--s7-fs-h1)/.92 var(--s7-font-display); text-transform: uppercase; }
.s7-h2      { font: 400 var(--s7-fs-h2)/.92 var(--s7-font-display); text-transform: uppercase; }
.s7-title   { font: 700 var(--s7-fs-title)/1.25 var(--s7-font-text); }
.s7-body    { font: 400 var(--s7-fs-body)/1.55 var(--s7-font-text); }
.s7-small   { font: 400 var(--s7-fs-small)/1.45 var(--s7-font-text); }
.s7-label   { font: 700 var(--s7-fs-label)/1.3 var(--s7-font-text); }
.s7-caption { font: 600 var(--s7-fs-caption)/1.3 var(--s7-font-text); }
.s7-overline{ font: 800 12px/1.2 var(--s7-font-text); letter-spacing: .2em; text-transform: uppercase; color: var(--s7-muted); }