/* ============================================================
   SMITH FITNESS EXPERIENCE — DESIGN SYSTEM
   Tokens v1.1 · Agosto 2026 · MarkAut

   FUENTE: Manual de Identidade Visual da Smith Academia.
   Los cuatro colores institucionales y la tipografía salen
   de ahí, no de una interpretación.

   Para cambiar el acento de TODO el sistema, se toca
   --smith-laranja y nada más.
   ============================================================ */

:root {

  /* ==========================================
     COLORES INSTITUCIONALES — del manual de marca
     PANTONE 1575C · Process Black U · 445 C · Trans. White
     ========================================== */

  --smith-laranja:      #F58634;   /* PANTONE 1575C — acento de marca */
  --smith-preto-marca:  #201E1E;   /* PANTONE Process Black U */
  --smith-cinza:        #4B4B4D;   /* PANTONE 445 C */
  --smith-branco:       #FEFEFE;   /* PANTONE Trans. White */

  /* ==========================================
     ESCALA DE SUPERFICIES
     Derivada del negro institucional #201E1E.
     El fondo baja un punto para que el negro de
     marca funcione como superficie elevada.
     ========================================== */

  --smith-preto:        #141212;   /* fondo principal */
  --smith-preto-02:     #1A1818;   /* cards nivel 1 */
  --smith-preto-03:     #201E1E;   /* cards nivel 2 — negro institucional */
  --smith-preto-04:     #2B2929;   /* bordes sólidos, hover */

  /* Variaciones funcionales del naranja (no son colores nuevos:
     son el mismo #F58634 con opacidad o luminosidad) */
  --smith-laranja-lt:   #FF9F5A;
  --smith-laranja-dk:   #D96D1E;
  --smith-laranja-soft: rgba(245, 134, 52, .12);
  --smith-laranja-line: rgba(245, 134, 52, .28);
  --smith-laranja-glow: rgba(245, 134, 52, .30);

  /* Neutro de apoyo — el gris institucional aclarado,
     para lo secundario: legado, citas, notas al pie. */
  --smith-dourado:      #9A9A9C;   /* alias histórico, hoy = gris de marca */
  --smith-dourado-soft: rgba(75, 75, 77, .18);
  --smith-dourado-line: rgba(154, 154, 156, .26);
  --smith-areia:        #C9C9CB;

  /* Texto */
  --smith-txt:          #FEFEFE;   /* blanco institucional */
  --smith-txt-2:        rgba(254, 254, 254, .68);
  --smith-txt-3:        rgba(254, 254, 254, .44);
  --smith-txt-4:        rgba(254, 254, 254, .26);

  /* Líneas */
  --smith-line:         rgba(254, 254, 254, .09);
  --smith-line-2:       rgba(254, 254, 254, .16);

  /* Semánticos (uso interno, no de marca) */
  --smith-ok:           #4BAF6A;
  --smith-alert:        #E0A02E;

  /* ==========================================
     TIPOGRAFÍA
     La tipografía oficial de la marca es GOLDPLAY:
     redondeada, de terminales suaves, amigable.
     Es una fuente de licencia, no está en la web.

     Mientras no se cargue el archivo de Goldplay,
     el sistema usa Poppins, que comparte la
     construcción geométrica y redondeada del logo.

     Para pasar a la fuente oficial: colocar los
     .woff2 de Goldplay en /assets/fonts, declarar
     el @font-face y ponerla primera en esta lista.
     No hay que tocar nada más.
     ========================================== */

  --smith-font:         'Goldplay', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --smith-font-serif:   Georgia, 'Times New Roman', serif;  /* solo citas largas */

  --smith-light:        300;
  --smith-regular:      400;
  --smith-medium:       500;
  --smith-semi:         600;
  --smith-bold:         700;

  /* Escala fluida — se adapta al móvil sin media queries */
  --smith-t-xs:         0.72rem;
  --smith-t-sm:         0.84rem;
  --smith-t-base:       1rem;
  --smith-t-lg:         clamp(1.06rem, 2.2vw, 1.2rem);
  --smith-t-xl:         clamp(1.24rem, 3vw, 1.5rem);
  --smith-t-2xl:        clamp(1.5rem, 4vw, 2rem);
  --smith-t-3xl:        clamp(1.9rem, 5vw, 2.9rem);
  --smith-t-4xl:        clamp(2.4rem, 7vw, 4.2rem);

  --smith-lead-tight:   1.08;
  --smith-lead-snug:    1.3;
  --smith-lead:         1.62;

  --smith-track-tight:  -.022em;
  --smith-track-wide:   .06em;
  --smith-track-caps:   .17em;

  /* ==========================================
     ESPACIADO — base 4
     ========================================== */

  --smith-s1:  4px;   --smith-s2:  8px;   --smith-s3:  12px;
  --smith-s4:  16px;  --smith-s5:  20px;  --smith-s6:  24px;
  --smith-s8:  32px;  --smith-s10: 40px;  --smith-s12: 48px;
  --smith-s16: 64px;  --smith-s20: 80px;  --smith-s24: 96px;

  --smith-sec-y:       clamp(64px, 10vw, 96px);
  --smith-gutter:      clamp(20px, 5vw, 24px);
  --smith-max:         1160px;

  /* ==========================================
     RADIOS
     Generosos. La marca es redondeada, como el logo.
     ========================================== */

  --smith-r-sm:   8px;
  --smith-r:      18px;
  --smith-r-lg:   24px;
  --smith-r-full: 999px;

  /* ==========================================
     SOMBRAS Y MOVIMIENTO
     Movimiento seco. Nada rebota.
     ========================================== */

  --smith-shadow:      0 12px 40px rgba(0, 0, 0, .45);
  --smith-shadow-lg:   0 22px 60px rgba(0, 0, 0, .6);
  --smith-shadow-warm: 0 14px 38px rgba(245, 134, 52, .28);

  --smith-fast:   150ms cubic-bezier(.4, 0, .2, 1);
  --smith-base:   250ms cubic-bezier(.4, 0, .2, 1);

  --smith-z-nav:  80;
  --smith-z-wa:   90;
}

/* ============================================================
   REGLAS DE USO

   Del manual de marca (obligatorias):
   1. El slogan "fitness experience" acompaña al logotipo.
      No usarlo debe consultarse previamente.
   2. El logotipo no se deforma, no se inclina, no se rota
      y no se aplica en colores ajenos a la marca.
   3. Nada de sombras excesivas, texturas, 3D ni biselados.
      Aplicaciones simples y limpias.
   4. Sobre naranja, el logotipo va en blanco. Es la
      aplicación negativa compuesta que el manual aprueba.

   Del sistema (decisiones de diseño para la web):
   5. El naranja es acento, no fondo. Máximo ~10% de la
      superficie. Si llena la pantalla, deja de valer.
   6. Sobre naranja, el texto pequeño va en negro de marca.
      Blanco sobre naranja no pasa contraste en tamaños chicos.
   7. El gris es para lo secundario: notas, legado, apoyo.
      Nunca en botones ni en llamadas a la acción.
   8. Una sola familia tipográfica. La jerarquía se hace
      con peso y tamaño, no sumando fuentes.
   9. Todo bloque de texto se lee en 60 caracteres o menos.
   ============================================================ */