/*
 * GenteLaPrision · Fundamentos visuales v2.50.72
 *
 * Capa de tokens semánticos. No contiene selectores de componentes ni cambia
 * por sí sola la apariencia. Los alias heredados se mantienen en app.css para
 * garantizar una migración progresiva y sin regresiones.
 */
:root {
    color-scheme: dark;

    /* Tipografía */
    --font-family-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-display: "Barlow Condensed", "Arial Narrow", sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    --font-size-xs: .75rem;
    --font-size-sm: .875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --line-height-tight: 1.1;
    --line-height-body: 1.65;

    /* Colores de fondo y superficie */
    --color-bg-page: #11100e;
    --color-bg-deep: #080807;
    --color-bg-footer: #0b0a09;
    --color-surface-1: #1b1916;
    --color-surface-2: #24211d;
    --color-surface-3: #2d2924;
    --color-surface-input: #0e0d0b;
    --color-overlay: rgba(0, 0, 0, .72);

    /* Texto */
    --color-text-primary: #eee8dd;
    --color-text-secondary: #c8c0b4;
    --color-text-muted: #aaa397;
    --color-text-inverse: #ffffff;

    /* Marca y estados */
    --color-accent-primary: #d45a32;
    --color-accent-secondary: #f2a65a;
    --color-admin: #FFC600;
    --color-success: #7abf73;
    --color-warning: #e1a955;
    --color-danger: #d96c6c;
    --color-info: #68a7df;

    /* Superficies semánticas de estado */
    --color-success-surface: #172218;
    --color-success-border: #385a3a;
    --color-warning-surface: #302820;
    --color-warning-border: #6f5636;
    --color-danger-surface: #291919;
    --color-danger-border: #703d3d;
    --color-info-surface: #172331;
    --color-info-border: #355b7b;

    /* Bordes */
    --color-border-subtle: #2b2823;
    --color-border-default: #3a352f;
    --color-border-strong: #5b5147;
    --color-border-control: #4b443b;
    --color-border-action: #65594d;
    --border-width: 1px;

    /* Espaciado */
    --space-0: 0;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Radios */
    --radius-xs: 2px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 999px;

    /* Sombras */
    --shadow-sm: 0 4px 14px rgba(0, 0, 0, .18);
    --shadow-md: 0 12px 30px rgba(0, 0, 0, .24);
    --shadow-lg: 0 22px 60px rgba(0, 0, 0, .32);
    --shadow-focus: 0 0 0 3px rgba(242, 166, 90, .22);

    /* Controles */
    --control-height-sm: 34px;
    --control-height-md: 44px;
    --control-height-lg: 50px;

    /* Movimiento */
    --duration-fast: 140ms;
    --duration-normal: 230ms;
    --duration-slow: 320ms;
    --ease-standard: cubic-bezier(.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(.2, .8, .2, 1);

    /* Estructura */
    --layout-content-max: 1180px;
    --layout-content-wide: 1400px;
    --layout-gutter-desktop: 32px;
    --layout-gutter-tablet: 20px;
    --layout-gutter-mobile: 12px;

    /* Capas */
    --z-base: 0;
    --z-sticky: 20;
    --z-dropdown: 40;
    --z-modal-backdrop: 80;
    --z-modal: 90;
    --z-toast: 100;

    /* Puntos de ruptura documentales. No se usan dentro de @media porque CSS
       nativo no admite variables personalizadas en condiciones de consulta. */
    --breakpoint-mobile: 680px;
    --breakpoint-tablet: 900px;
    --breakpoint-navigation: 1000px;
    --breakpoint-wide: 1400px;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration-normal: 0ms;
        --duration-slow: 0ms;
    }
}

/* Extensiones para componentes complejos · v2.50.74 */
:root {
    --table-row-height: 46px;
    --table-cell-padding-block: .75rem;
    --table-cell-padding-inline: 1rem;
    --table-header-bg: var(--color-surface-2);
    --table-row-hover-bg: rgba(255, 255, 255, .025);
    --table-row-selected-bg: rgba(242, 166, 90, .08);

    --chip-height: 28px;
    --chip-padding-inline: .65rem;
    --chip-bg: var(--color-surface-2);
    --chip-border: var(--color-border-default);

    --modal-width-sm: 520px;
    --modal-width-md: 760px;
    --modal-width-lg: 1040px;
    --modal-padding: var(--space-6);

    --pagination-size: 38px;
    --empty-state-min-height: 180px;
}