/* Design tokens — tema "Panel oscuro". Ver design-system/MASTER.md */

@font-face { font-family: "Figtree"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/figtree-400.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/figtree-500.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/figtree-600.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/figtree-700.ttf") format("truetype"); }
@font-face { font-family: "Figtree"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/figtree-800.ttf") format("truetype"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-500.ttf") format("truetype"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-600.ttf") format("truetype"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/space-grotesk-700.ttf") format("truetype"); }

:root {
    color-scheme: dark;

    /* Superficies, de atrás hacia adelante */
    --c-bg: #0e1417;
    --c-header: #121b20;
    --c-surface: #151f25;
    --c-surface-2: #1c2830;
    --c-border: #22303a;
    --c-border-strong: #2f404b;

    /* Texto */
    --c-text: #e6edf1;
    --c-text-soft: #c7d3da;
    --c-text-muted: #9fb0bb;

    /* Marca. --c-primary es el color de relleno (botones, pestaña activa); --c-link es el que se lee sobre fondo oscuro. */
    --c-primary: #15803d;
    --c-primary-hover: #15803d;
    --c-primary-contrast: #ffffff;
    --c-link: #7eb994;
    --c-link: color-mix(in oklab, var(--c-primary) 55%, white);
    --c-focus: #7eb994;

    --c-nav-text: var(--c-text-soft);

    /* Estados: fondo (tinte), borde, sólido (punto/etiqueta), on (texto sobre sólido), text (sobre fondo oscuro) */
    --c-info-bg: #142433;    --c-info-border: #2a4a6b;    --c-info-solid: #60a5fa;    --c-info-on: #0b1e36;    --c-info-text: #bfdbfe;
    --c-success-bg: #10261b; --c-success-border: #1f6b43; --c-success-solid: #22c55e; --c-success-on: #052e16; --c-success-text: #86efac;
    --c-warning-bg: #2a1f0c; --c-warning-border: #8a5a12; --c-warning-solid: #f59e0b; --c-warning-on: #2a1a03; --c-warning-text: #fcd34d;
    --c-danger-bg: #2b1416;  --c-danger-border: #7f2a2e;  --c-danger-solid: #dc2626;  --c-danger-on: #ffffff;  --c-danger-text: #fca5a5;

    --font-display: "Space Grotesk", "Figtree", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-md: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.375rem;
    --fs-2xl: 1.75rem;
    --fs-3xl: 2rem;

    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

    --radius: 8px;          /* botones y campos */
    --radius-lg: 12px;      /* paneles, tablas */
    --radius-xl: 16px;      /* tarjetas */
    --radius-sm: 6px;
    --radius-pill: 999px;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.25);
    --shadow-pop: 0 10px 30px rgb(0 0 0 / 0.5);

    --tap: 44px;
    --z-nav: 30;
    --z-dropdown: 40;
    --z-modal: 50;
}

/* Variante clara, para usar al sol (se elige con el botón "Tema"). Misma familia, mismos nombres. */
:root[data-theme="light"] {
    color-scheme: light;

    --c-bg: #eef2f4;
    --c-header: #ffffff;
    --c-surface: #ffffff;
    --c-surface-2: #e8eef2;
    --c-border: #d5dee4;
    --c-border-strong: #b4c2cb;

    --c-text: #0e1a21;
    --c-text-soft: #33444f;
    --c-text-muted: #50626d;

    --c-link: #166534;
    --c-focus: #166534;

    --c-info-bg: #e3effe;    --c-info-border: #9cc3f5;    --c-info-solid: #2563eb;    --c-info-on: #ffffff;    --c-info-text: #1e4d8f;
    --c-success-bg: #dcfce7; --c-success-border: #86d3a2; --c-success-solid: #16a34a; --c-success-on: #ffffff; --c-success-text: #166534;
    --c-warning-bg: #fef3c7; --c-warning-border: #e8c26a; --c-warning-solid: #d97706; --c-warning-on: #ffffff; --c-warning-text: #7a4a05;
    --c-danger-bg: #fee2e2;  --c-danger-border: #f0a3a3;  --c-danger-solid: #dc2626;  --c-danger-on: #ffffff;  --c-danger-text: #991b1b;

    --shadow: 0 1px 2px rgb(14 26 33 / 0.08);
    --shadow-pop: 0 10px 30px rgb(14 26 33 / 0.18);
}