/*
 * Tokens de marca de Fittrena — compartidos por la web pública
 * (public/css/web/web.css) y el panel del entrenador
 * (public/css/entrenador/tema.css, que los importa). Fuente: SPEC del
 * prototipo + assets-kit/README.md. Cambiar un color aquí lo cambia en
 * los dos sitios.
 */

/* ---------- 1a. Satoshi (self-host, ver public/fonts/satoshi/LICENSE.txt) */

@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('/fonts/satoshi/Satoshi-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ---------- 1b. Tokens del prototipo ---------- */

:root {
    --lime: #D9FF3F;
    --graphite: #0B0B0D;
    --carbon: #131417;
    --slate: #1C1E22;
    --white: #F0F0F0;
    --lavender: #B9A7FF;
    /* El SPEC §1 fija el coral de riesgo en #FF6B5B (el #FFB8C8 del
       styles.css del bundle es el coral "nutrición" de la app) */
    --coral: #FF6B5B;
    /* Electric del kit: solo blobs de fondo y detalles, nunca texto */
    --electric: #1500FF;

    --white-a08: rgba(240, 240, 240, .08);
    --white-a10: rgba(240, 240, 240, .10);
    --white-a15: rgba(240, 240, 240, .15);
    --white-a45: rgba(240, 240, 240, .45);
    --white-a60: rgba(240, 240, 240, .6);
    --white-a75: rgba(240, 240, 240, .75);
    --lime-a14: rgba(217, 255, 63, .14);
    --lime-a40: rgba(217, 255, 63, .4);
    --lavender-a16: rgba(185, 167, 255, .16);
    --lavender-a35: rgba(185, 167, 255, .35);
    --coral-a14: rgba(255, 107, 91, .14);
    --coral-a35: rgba(255, 107, 91, .35);
    --electric-a14: rgba(21, 0, 255, .14);
    --electric-a35: rgba(21, 0, 255, .35);

    --bg-page: var(--graphite);
    --surface-card: var(--carbon);
    --surface-raised: var(--slate);
    --text-body: var(--white);
    --text-muted: var(--white-a60);
    --text-faint: var(--white-a45);
    --text-on-accent: var(--graphite);
    --border-hairline: var(--white-a08);
    --border-card: var(--white-a08);
    --border-strong: var(--white-a15);

    --font-display: 'Satoshi', -apple-system, system-ui, sans-serif;
    --font-body: 'Montserrat', -apple-system, system-ui, sans-serif;

    --radius-sm: 10px;   /* controles */
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;   /* tarjetas */
    --radius-pill: 999px;

    --shadow-lift: 0 10px 30px rgba(0, 0, 0, .35); /* solo overlays */
    --blur-nav: blur(14px);
    --ease-ui: cubic-bezier(.4, 0, .2, 1);
    --dur-fast: .18s;
}