/* ============================================================
   Listo Casas — Design Tokens
   ============================================================
   Variables CSS canónicas usadas en TODO el sitio. Cualquier cambio
   de paleta se hace acá y se propaga a toda la app sin tocar
   componentes. Plan Fase 1.9 del PLAN-PRODUCCION.

   Uso: var(--color-brand), var(--radius-md), etc.

   Migración: muchos `.razor.css` todavía usan hex hardcodeados.
   La política gradual es: cualquier archivo que se toque en una PR
   migra sus colores a variables (no es necesario hacerlo todo en
   una sola PR). Los más usados (brand teal, slate text) ya están
   migrados en Home/Listado/Detalle/MainLayout.

   Naming:
     --color-{rol}              → un valor por rol semántico.
     --color-{rol}-{intensity}  → variantes (dark/light/bg).
     --radius-{size}            → bordes redondeados (sm/md/lg/xl/pill).
     --shadow-{size}            → sombras (sm/md/lg).
     --space-{n}                → espaciado (4px multiples) — opcional.
   ============================================================ */

:root {
    /* ═══ Brand (teal) ═════════════════════════════════════════ */
    --color-brand:        #0d9488;
    --color-brand-dark:   #0f766e;
    --color-brand-light:  #5eead4;
    --color-brand-pale:   #99f6e4;
    --color-brand-bg:     #f0fdfa;

    /* ═══ Status ══════════════════════════════════════════════ */
    --color-error:        #e74c3c;
    --color-error-dark:   #c0392b;
    --color-warning:      #f59e0b;
    --color-success:      #10b981;
    --color-info:         #2563eb;

    /* ═══ Texto (escala slate) ════════════════════════════════ */
    --color-text:         #0f172a;       /* casi negro, body principal */
    --color-text-muted:   #475569;       /* secundario */
    --color-text-subtle:  #64748b;       /* terciario, captions */
    --color-text-disabled:#94a3b8;       /* deshabilitado / placeholder */

    /* ═══ Superficies ═════════════════════════════════════════ */
    --color-bg:           #f8fafc;       /* fondo de página */
    --color-surface:      #ffffff;       /* cards, modales */
    --color-border:       #e8edf3;       /* bordes sutiles */
    --color-border-soft:  #e2e8f0;       /* bordes algo más visibles */
    --color-divider:      #cbd5e1;       /* divisores */

    /* ═══ Verificación Catastro (Fase 2.1) ════════════════════ */
    --color-verified:     var(--color-brand);
    --color-verified-bg:  var(--color-brand-bg);

    /* ═══ Radii ═══════════════════════════════════════════════ */
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    20px;
    --radius-pill:  999px;

    /* ═══ Sombras ═════════════════════════════════════════════ */
    --shadow-sm:    0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md:    0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg:    0 12px 32px -12px rgba(15, 23, 42, 0.18);

    /* ═══ Z-index scale ═══════════════════════════════════════ */
    --z-dropdown:   100;
    --z-sticky:     50;
    --z-overlay:    500;
    --z-modal:      1000;
}

/* ============================================================
   Reglas globales que dependen de los tokens — Fase 1.10:
   focus-visible accesible (WCAG 2.1 §2.4.7) + disabled state.
   ============================================================ */

/* Focus ring accesible: visible para teclado, invisible para mouse
   (browser maneja eso automáticamente con :focus-visible). El ring
   usa el brand teal para coherencia visual. */
*:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Botones, links y elementos rol-button: outline más prominente
   porque son los que más se navegan con teclado. */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 3px;
}

/* Disabled state global: 50% opacidad, cursor no-allowed.
   Cualquier control que tenga atributo disabled lo refleja
   visualmente sin tener que repetir CSS en cada componente. */
:disabled,
[aria-disabled="true"],
.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Hint para screen readers cuando el ring no se ve por overflow:hidden
   o background fuerte; usar la clase .has-focus-shadow en el padre. */
.has-focus-shadow:focus-within {
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25);
}