/* Tokens del deck. Derivados del design system de Glya
   (/informes/claude_code_handoff/design-system/tokens.css + brand.md §8),
   recortados a lo que una charla proyectada necesita y con la escala
   tipográfica reventada hacia arriba: esto se lee a 10 metros, no a 50cm. */

@import url('../fonts/fonts.css');

:root {
    /* ---------- Marca ---------- */
    --glya-blue: #144170;
    --glya-blue-dark: #0e2f52;
    --glya-teal: #0abfbf;
    --glya-warm: #ff6b35;

    /* B2C — el universo humano de la charla (paciente, cuidador, Glady) */
    --b2c-blue: #2847c9;
    --b2c-violet: #5b21b6;
    --b2c-blue-soft: #7c9fff;
    --b2c-violet-soft: #b78fff;
    --b2c-gradient: linear-gradient(90deg, var(--b2c-blue) 0%, var(--b2c-violet) 100%);
    --b2c-text-gradient: linear-gradient(90deg, var(--b2c-blue-soft) 0%, var(--b2c-violet-soft) 100%);

    /* B2B — el universo institucional (PXM, cohortes, datos) */
    --b2b-accent: linear-gradient(135deg, #7dd3fc 0%, #0abfbf 55%, #60a5fa 100%);

    /* ---------- Superficies oscuras (registro «pantalla») ---------- */
    --bg-near-black: #050d1a;
    --bg-dark: #0d1426;
    --bg-blue: var(--glya-blue-dark);
    --hero-overlay: linear-gradient(to top, #020617 0%, rgba(15, 23, 42, 0.6) 50%, transparent 100%);

    /* ---------- Registro «marca» --------------------------------------
       El azul institucional como campo, no negro. Un color saturado
       aguanta la luz ambiente de un espacio abierto (Healthtech Park es
       al aire libre); el negro se lava a gris sucio. Teal solo donde hay
       que mirar. */
    --brand-field: radial-gradient(120% 100% at 12% 0%, #1b5389 0%, transparent 60%), var(--glya-blue);
    /* Segunda superficie de marca: más profunda y con el foco abajo a la
       derecha, para que dos slides azules seguidas no se vean idénticas.
       La alternancia es de PROFUNDIDAD, no de color: sigue siendo azul Glya. */
    --brand-field-deep:
        radial-gradient(90% 120% at 88% 108%, rgba(10, 191, 191, 0.20) 0%, transparent 55%),
        radial-gradient(120% 100% at 8% -10%, #17527f 0%, transparent 62%),
        #0d3459;
    /* Tercera superficie: el azul casi negro, con acento degradado en dos
       focos —violeta eléctrico arriba a la derecha, teal abajo a la
       izquierda—. El violeta es el degradado B2C de la marca (#2847c9),
       así que el deck gana profundidad sin salirse del sistema. */
    --brand-field-night:
        radial-gradient(68% 88% at 84% 6%, rgba(40, 71, 201, 0.38) 0%, transparent 58%),
        radial-gradient(78% 100% at 8% 98%, rgba(10, 191, 191, 0.24) 0%, transparent 62%),
        #0d1426;
    --track: rgba(255, 255, 255, 0.13);
    --on-brand: #ffffff;
    --on-brand-soft: rgba(255, 255, 255, 0.75);
    /* 0.62 y no 0.5: al 50% el contraste sobre el campo azul es 3,86:1, por
       debajo del mínimo de 4,5:1 — y este token viste los rótulos mono, que
       son el texto MÁS pequeño del deck. Al 62% sube a 5,07:1.
       Medido con WCAG contra #144170; el teal queda en 4,56:1 y el blanco
       en 10,40:1. */
    --on-brand-faint: rgba(255, 255, 255, 0.62);

    /* Unidad de maquetación: los márgenes y los saltos son múltiplos. */
    --cell: 2.2cqw;

    /* ---------- Neutros ---------- */
    --slate-50: #f8fafc;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    --fg-on-dark: #ffffff;
    --fg-muted-on-dark: #cbd5e1;
    --fg-dim-on-dark: #94a3b8;
    --border-on-dark: rgba(255, 255, 255, 0.1);

    /* ---------- Estado clínico ---------- */
    --ok: #10b981;
    --warn: #f59e0b;
    --alert: #dc2626;
    --info: var(--glya-teal);

    /* ---------- Tipografía ---------- */
    --font-display: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

    /* Escala de proyección, en `cqw` = porcentaje del ANCHO DEL ESCENARIO.
       Sin clamp(): el escenario está bloqueado en 16:9 (ver deck.css), así
       que las unidades relativas ya no pueden desmadrarse y un tope en rem
       solo rompería la proporción en ventanas pequeñas. Todo escala junto.
       Referencia: con el escenario a 1600px de ancho, 1cqw = 16px. */
    --fs-mega: 20cqw;
    --fs-hero: 7.5cqw;
    --fs-title: 4.8cqw;
    --fs-lead: 2.4cqw;
    --fs-body: 1.6cqw;
    --fs-note: 1.15cqw;

    --lh-tight: 1.02;
    --lh-snug: 1.18;
    --lh-relaxed: 1.45;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.16em;

    /* ---------- Layout ---------- */
    --pad-slide: 6cqw;
    --radius-lg: 16px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-pill: 9999px;

    /* ---------- Movimiento ---------- */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-base: 240ms;
    --dur-slow: 420ms;
    --dur-reveal: 600ms;

    /* ---------- Alias que usa el chasis ---------- */
    --paper: var(--fg-on-dark);
    --paper-dim: var(--fg-muted-on-dark);
    --paper-mute: var(--fg-dim-on-dark);
    --accent: var(--glya-teal);
}