/* Colores y tipografia del proyecto. Ver DESIGN_TOKENS.md.
   Spacing, radios, border-width y clases van en base.css o pages/, no aca. */

:root {
    /* Superficie / texto */
    --color-bg: #242424;
    --color-surface: #1c1c1e;
    --color-border: #2e2e30;
    --color-text: #e8e8e8;
    --color-text-muted: #9a9a9a;
    --color-text-on-accent: #ffffff;

    /* Marca */
    --color-accent: #ff0100;
    --color-accent-hover: #d40100;
    --color-primary: #808080;
    --color-primary-dark: #606060;

    /* Estado */
    --color-error: #f87171;
    --color-error-bg: rgba(248, 113, 113, 0.08);
    --color-success: #4ade80;
    --color-success-bg: rgba(74, 222, 128, 0.08);
    --color-warning: #facc15;
    --color-warning-bg: rgba(250, 204, 21, 0.08);

    /* Overlays */
    --color-overlay: rgba(0, 0, 0, 0.55);

    /* Semanticos de dominio (cuadratura) */
    --color-cuadra: #2f7d3c;
    --color-faltante: #c0392b;
    --color-sobrante: #b8860b;

    /* Tipografia */
    --font-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 20px;
}