/* ============================================================================
   MedicalSys · tokens semánticos (lote visual V2)
   ----------------------------------------------------------------------------
   REGLA DE ESTE ARCHIVO: aquí **solo** se declaran variables en `:root`.
   No hay una sola regla de estilo. Por eso cargarlo no cambia nada de lo que se
   ve: sirve para que lo nuevo use nombres claros y para migrar pantalla por
   pantalla sin un rediseño de golpe.

   Los valores de color están tomados de lo que la app ya usa (no se inventan).
   El theming por consultorio sigue mandando: `--action-primary` apunta a
   `--primary`, que cada dentista define con su color.
   ========================================================================== */

:root {
    /* ── superficies ───────────────────────────────────────────────────── */
    --bg-page: #f0f9ff;
    --bg-surface: #ffffff;
    --bg-subtle: #f8fafc;
    --bg-muted: #f1f5f9;

    /* ── bordes ────────────────────────────────────────────────────────── */
    --border-default: #e2e8f0;
    --border-strong: #cbd5e1;

    /* ── texto ─────────────────────────────────────────────────────────── */
    --text-primary: #1e3a5f;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-inverse: #ffffff;

    /* ── acción (sigue el color del consultorio) ───────────────────────── */
    --action-primary: var(--primary, #0369a1);
    --action-primary-hover: var(--primary-dark, #0284c7);
    --action-primary-subtle: var(--primary-bg, #f0f9ff);
    --action-secondary: #475569;
    --action-danger: #b91c1c;

    /* ── foco (un solo anillo en toda la app) ──────────────────────────── */
    --focus-ring: #0369a1;
    --focus-ring-on-dark: #8ed4ff;

    /* ── estados ───────────────────────────────────────────────────────── */
    --status-success: #15803d;
    --status-success-bg: #dcfce7;
    --status-warning: #a16207;
    --status-warning-bg: #fef3c7;
    --status-danger: #b91c1c;
    --status-danger-bg: #fee2e2;
    --status-info: #0369a1;
    --status-info-bg: #e0f2fe;
    --clinical-alert: #b91c1c;
    --clinical-alert-bg: #fef2f2;

    /* ── deshabilitado ─────────────────────────────────────────────────── */
    --disabled-bg: #f1f5f9;
    --disabled-text: #94a3b8;

    /* ── tipografía (escala declarada; se aplica pantalla por pantalla) ── */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

    --fs-xs: 0.8125rem;    /* 13 px · piso de legibilidad (V40) */
    --fs-sm: 0.875rem;     /* 14 px · piso del texto operativo */
    --fs-base: 1rem;       /* 16 px · lectura y formularios */
    --fs-lg: 1.125rem;     /* 18 px */
    --fs-xl: 1.25rem;      /* 20 px · encabezado de sección */
    --fs-2xl: 1.5rem;      /* 24 px · encabezado de página */
    --fs-3xl: 2rem;        /* 32 px · cifra destacada */

    --lh-tight: 1.25;
    --lh-normal: 1.5;
    --lh-relaxed: 1.65;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* ── espaciado (escala de 4) ───────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* ── radios y sombras ──────────────────────────────────────────────── */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* ojo: las sombras viejas siguen siendo de base.html */
    --shadow-soft: 0 1px 2px rgba(15, 23, 42, .06);

    /* ── capas ─────────────────────────────────────────────────────────── */
    --z-sidebar: 1000;
    --z-topbar: 900;
    --z-dropdown: 1050;
    --z-modal: 1060;
    --z-toast: 1080;
}