/* ==========================================================================
   Trust Solution — Design tokens
   ========================================================================== */

/* --- tokens/colors.css ----------------------------------------------------

   PALETA OFICIAL — CUATRO COLORES. NADA MÁS.

     PRIMARIOS     #11274e  azul marino     (logo: "Solution" + escudo)
                   #44c99a  verde menta     (logo: "Trust" + la S)

     SECUNDARIOS   #21817f  verde petróleo
                   #b2f5e4  menta claro

   Regla: todo color declarado en el sitio es uno de esos cuatro, o blanco.
   Se permiten transparencias de los cuatro (rgba) porque las sombras y el
   velo sobre el video de portada no existen sin alfa: un velo opaco taparía
   el metraje. No hay grises, ni tonos intermedios, ni rampas.

   Reparto de trabajo entre primarios y secundarios
   ------------------------------------------------
   PRIMARIO marino    Titulares, cuerpo de texto, fondos oscuros, footer,
                      sombras y velos. Es el ancla de todo el sitio.
   PRIMARIO menta     El acento que llama a la acción: fondo de botones,
                      iconos, relleno de formas. Sobre blanco NO lleva texto
                      pequeño (2.09:1); su sitio es el relleno, no la letra.
   SECUNDARIO petróleo  Lo que el menta no puede hacer sobre fondo claro:
                      antetítulos, enlaces, texto de apoyo (4.66:1 = AA).
   SECUNDARIO aqua    Superficies suaves, bordes de marca y los acentos
                      claros sobre el marino (11.99:1).
   -------------------------------------------------------------------------- */
:root {
  /* PRIMARIOS */
  --ts-navy: #11274e;
  --ts-mint: #44c99a;

  /* SECUNDARIOS */
  --ts-teal: #21817f;
  --ts-aqua: #b2f5e4;

  --ts-white: #ffffff;
  --ts-white-rgb: 255, 255, 255;

  /* Canales RGB, para las transparencias */
  --ts-navy-rgb: 17, 39, 78;
  --ts-mint-rgb: 68, 201, 154;
  --ts-teal-rgb: 33, 129, 127;
  --ts-aqua-rgb: 178, 245, 228;

  /* --- Roles ------------------------------------------------------------ */
  /* Texto (contraste sobre blanco entre paréntesis) */
  --text-heading: var(--ts-navy);                    /* 14.75:1 */
  --text-body: rgba(var(--ts-navy-rgb), 0.86);       /*  9.62:1 */
  --text-muted: var(--ts-teal);                      /*  4.66:1 */
  --text-eyebrow: var(--ts-teal);                    /*  4.66:1 */
  --text-on-dark: var(--ts-white);                   /* 14.75:1 sobre marino */
  --text-on-mint: var(--ts-navy);                    /*  7.07:1 */

  /* Superficies */
  --surface-page: var(--ts-white);
  --surface-card: var(--ts-white);
  --surface-dark: var(--ts-navy);
  --surface-dark-deep: var(--ts-navy);
  --surface-tint: var(--ts-aqua);
  --surface-tint-soft: rgba(var(--ts-aqua-rgb), 0.38);
  --surface-muted: rgba(var(--ts-aqua-rgb), 0.22);

  /* Bordes */
  --border-subtle: rgba(var(--ts-navy-rgb), 0.14);
  --border-brand: var(--ts-aqua);
  --border-strong: var(--ts-teal);

  /* Acción */
  --color-brand-primary: var(--ts-mint);
  --color-brand-primary-hover: var(--ts-teal);
  --color-brand-secondary: var(--ts-navy);
  --color-brand-secondary-hover: var(--ts-teal);
  --link-color: var(--ts-teal);
  --link-hover: var(--ts-navy);

  /* Acentos sobre fondo oscuro */
  --accent-on-dark: var(--ts-aqua);
  --accent-on-dark-strong: var(--ts-mint);

  /* Degradados: los cuatro colores en secuencia */
  --gradient-brand: linear-gradient(135deg, var(--ts-mint) 0%, var(--ts-teal) 48%, var(--ts-navy) 100%);
  --gradient-dark: linear-gradient(135deg, var(--ts-teal) 0%, var(--ts-navy) 100%);
  --gradient-tint: linear-gradient(160deg, var(--ts-aqua) 0%, var(--ts-white) 60%);
}

/* --- tokens/typography.css ------------------------------------------------ */
:root {
  --font-display: 'Baloo 2', ui-rounded, 'Segoe UI Rounded', system-ui, sans-serif;
  --font-body: 'Nunito Sans', system-ui, -apple-system, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-base: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;
  --fs-3xl: 38px;
  --fs-4xl: 48px;
  --fs-5xl: 60px;
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;
  --ls-caps: 0.14em;
}

/* --- tokens/spacing.css --------------------------------------------------- */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --container-max: 1200px;
  --container-pad: 24px;
}

/* --- tokens/effects.css --------------------------------------------------- */
:root {
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(var(--ts-navy-rgb), 0.08);
  --shadow-md: 0 8px 24px rgba(var(--ts-navy-rgb), 0.13);
  --shadow-lg: 0 20px 48px rgba(var(--ts-navy-rgb), 0.18);
  --shadow-icon: 0 10px 20px rgba(var(--ts-mint-rgb), 0.35);
  --ease-standard: cubic-bezier(.4, 0, .2, 1);
  --duration-fast: 150ms;
  --duration-base: 220ms;
}