/* ─── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Teko:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');

:root {
    /* ─── Brand Colors ────────────────────────────────────── */
    --color-orange:     #fa5d00;        /* Fight Orange · botones, destacados, keywords */
    --color-black:      #222222;        /* Fight Black  · fondo principal, base visual  */
    --color-cream:      #fef9f0;        /* Fight Cream  · fondos claros, contraste      */

    /* ─── Derived / UI colors ────────────────────────────── */
    --color-orange-hover:  #e05200;             /* Orange oscurecido para :hover          */
    --color-orange-rgb:    250, 93, 0;          /* Para uso en rgba()                     */
    --color-orange-subtle: rgba(250, 93, 0, 0.15); /* Fondos con tinte naranja           */
    --color-surface:       #111111;             /* Tarjetas, inputs                       */
    --color-border:        #333333;             /* Bordes neutros                         */
    --color-text-muted:    #999999;             /* Texto secundario                       */
    --color-white:         #ffffff;

    /* ─── Typography ─────────────────────────────────────── */
    --font-display:        'Teko', sans-serif;       /* Títulos, headings, impacto    */
    --font-body:           'Montserrat', sans-serif; /* Cuerpo, UI, labels            */
    --font-size-base:      16px;
    --line-height-base:    1.5;
}