/* =========================================================
   BrandStart® — Design tokens · Refresh 2026
   Paleta, gradientes y fondos aprobados (referencia UX/UI).
   ========================================================= */

/* ---- Reddit Sans — fuente de marca self-hosted ---- */
@font-face {
  font-family: "Reddit Sans";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/af73fde3-c74b-43c9-a3f2-5199850caeb2.woff2") format("woff2-variations"),
       url("../assets/af73fde3-c74b-43c9-a3f2-5199850caeb2.woff2") format("woff2");
}
@font-face { font-family: "Reddit Sans"; font-weight: 400; font-display: swap; src: url("../assets/4c28b0cd-86c7-405a-84c6-3baf7b1a3ac7.woff2") format("woff2"); }
@font-face { font-family: "Reddit Sans"; font-weight: 500; font-display: swap; src: url("../assets/4f3ddc8a-c966-4612-8aef-e55e7f20a130.woff2") format("woff2"); }
@font-face { font-family: "Reddit Sans"; font-weight: 600; font-display: swap; src: url("../assets/6e301b0a-fa98-4864-8eed-f74d63f45f0e.woff2") format("woff2"); }
@font-face { font-family: "Reddit Sans"; font-weight: 700; font-display: swap; src: url("../assets/becef8ca-e602-41c3-9739-e3afff660f31.woff2") format("woff2"); }
@font-face { font-family: "Reddit Sans"; font-weight: 800; font-display: swap; src: url("../assets/3bbe0a2d-0a39-466f-9e5f-fde7ee809b1d.woff2") format("woff2"); }
@font-face { font-family: "Reddit Sans"; font-weight: 900; font-display: swap; src: url("../assets/bb68b07b-2268-4026-8701-192dbcc8291e.woff2") format("woff2"); }

:root {
  /* ---- Color · base ---- */
  --bs-black:      #000000;
  --bs-ink:        #050505;   /* texto principal + superficies oscuras */
  --bs-ink-soft:   #2D3538;
  --bs-white:      #FFFFFF;

  --bs-blue:       #005DFF;   /* azul BrandStart — ancla de marca */
  --bs-blue-dark:  #003DB8;   /* hover + azul accesible sobre claro */

  /* ---- Color · familia tonal azul (oficial) ---- */
  --bs-apertura:   #EFF3FE;   /* fondos suaves, washes del hero */
  --bs-claridad:   #E2EAFE;   /* relleno de tarjeta, hover */
  --bs-estructura: #CFDCFD;   /* líneas, módulos secundarios */
  --bs-confianza:  #AFC4FC;   /* profundidad, stops de gradiente */

  /* ---- Color · acentos extendidos (digitales, atmosféricos) ----
     Uso medido: stops de gradiente, halos, glow de sección oscura. */
  --bs-violet:     #7B5DFF;
  --bs-rose:       #FF6FDC;

  /* ---- Color · texto + líneas ---- */
  --bs-text:        rgba(5, 5, 5, .82);
  --bs-text-muted:  rgba(5, 5, 5, .62);
  --bs-text-soft:   rgba(5, 5, 5, .42);
  --bs-line:        rgba(5, 5, 5, .10);
  --bs-line-strong: rgba(5, 5, 5, .18);

  /* sobre superficies oscuras */
  --bs-on-dark:        #FFFFFF;
  --bs-on-dark-muted:  rgba(255, 255, 255, .70);
  --bs-on-dark-soft:   rgba(255, 255, 255, .42);
  --bs-on-dark-line:   rgba(255, 255, 255, .12);

  /* ---- Color · superficies ---- */
  --bs-surface:      #FFFFFF;
  --bs-surface-soft: #FBFCFF;
  --bs-surface-tint: #EFF3FE;
  --bs-surface-dark: #050505;

  /* ---- Tipografía · familia ---- */
  --bs-font-sans: "Reddit Sans", Inter, ui-sans-serif, system-ui,
                  -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bs-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Tipografía · pesos (Reddit Sans variable — referencia original) ---- */
  --bs-w-regular: 400;
  --bs-w-medium:  500;
  --bs-w-semi:    600;
  --bs-w-bold:    700;
  --bs-w-cta:     720;   /* peso de botón */
  --bs-w-card:    760;   /* H3 / títulos de tarjeta */
  --bs-w-eyebrow: 800;
  --bs-w-display: 830;   /* H1 / H2 */
  --bs-w-black:   900;

  /* ---- Tipografía · roles (referencia original) ---- */
  --bs-fs-hero:    clamp(40px, 5.2vw, 78px);
  --bs-fs-h2:      clamp(38px, 5.2vw, 68px);
  --bs-fs-h3:      26px;
  --bs-fs-lead:    clamp(18px, 2vw, 22px);
  --bs-fs-body:    16px;
  --bs-fs-small:   14px;
  --bs-fs-eyebrow: 12px;
  --bs-fs-cta:     14px;

  --bs-lh-display: 0.88;
  --bs-lh-h2:      0.9;
  --bs-lh-h3:      1;
  --bs-lh-lead:    1.4;
  --bs-lh-body:    1.5;
  --bs-lh-tight:   1.1;

  --bs-ls-display: -0.075em;
  --bs-ls-h2:      -0.065em;
  --bs-ls-h3:      -0.04em;
  --bs-ls-lead:    -0.02em;
  --bs-ls-eyebrow:  0.1em;
  --bs-ls-cta:     -0.01em;

  /* ---- Radios ---- */
  --bs-radius-sm:   12px;
  --bs-radius-md:   18px;
  --bs-radius-lg:   24px;
  --bs-radius-xl:   32px;
  --bs-radius-pill: 999px;

  /* ---- Sombras · suaves, azuladas ---- */
  --bs-shadow-soft:   0 10px 34px rgba(0, 34, 120, .05);
  --bs-shadow-md:     0 16px 50px rgba(0, 34, 120, .07);
  --bs-shadow-lg:     0 28px 90px rgba(0, 22, 90, .12);
  --bs-shadow-strong: 0 38px 100px rgba(0, 0, 0, .20);
  --bs-shadow-cta:    0 12px 30px rgba(5, 5, 5, .14);
  --bs-shadow-blue:   0 22px 60px rgba(0, 93, 255, .38);

  /* ---- Espaciado / layout ---- */
  --bs-space-1: 4px;
  --bs-space-2: 8px;
  --bs-space-3: 12px;
  --bs-space-4: 16px;
  --bs-space-5: 24px;
  --bs-space-6: 32px;
  --bs-space-7: 48px;
  --bs-space-8: 72px;
  --bs-space-9: 104px;

  --bs-container:     1140px;
  --bs-container-nav: 1040px;
  --bs-section-py:    112px;
  --bs-section-py-sm: 68px;

  /* ---- Movimiento ---- */
  --bs-ease:     cubic-bezier(.22, .8, .26, 1);
  --bs-dur-fast: 160ms;
  --bs-dur:      240ms;

  /* ---- Gradientes de firma (referencia aprobada) ---- */
  --bs-grad-aurora:
    linear-gradient(90deg, transparent, rgba(0,93,255,.16),
                    rgba(255,111,220,.18), transparent);
  --bs-grad-solid:
    linear-gradient(90deg, #005DFF, #7B5DFF, #FF6FDC);
  --bs-grad-page:
    radial-gradient(circle at 15% 0%, rgba(175,196,252,.55), transparent 26rem),
    radial-gradient(circle at 92% 8%, rgba(123,93,255,.20), transparent 28rem),
    linear-gradient(180deg, #fff 0%, #fbfcff 38%, #fff 100%);
  --bs-grad-dark:
    radial-gradient(circle at 20% 8%,  rgba(0,93,255,.38),   transparent 24rem),
    radial-gradient(circle at 88% 86%, rgba(255,111,220,.18), transparent 24rem),
    #050505;
  --bs-grad-hero-shell:
    radial-gradient(circle at 78% 18%, rgba(255,111,220,.32), transparent 18rem),
    radial-gradient(circle at 17% 22%, rgba(0,93,255,.18),   transparent 18rem),
    linear-gradient(180deg, rgba(239,243,254,.95), rgba(255,255,255,.86) 66%, rgba(255,255,255,.96));
}