/* Holos — paleta BOSQUE, dos temas (claro y oscuro).
   Spec: docs/design/tema-claro-oscuro.md. UNA sola fuente de color: todo sale de estos tokens.
   El acento es el MISMO en los dos temas; el oscuro cambia la luz (superficies, texto, bordes),
   no la marca. El oscuro entra SOLO por data-theme="dark" en <html> (lo emite el servidor desde
   la cookie holos.ui.theme) — nunca por prefers-color-scheme: el hotel decide, no el sistema. */
:root {
    /* Brand — Bosque */
    --holos-brand-primary: #0f766e;
    --holos-brand-primary-hover: #115e59;
    --holos-brand-primary-soft: #ecfdf5;
    --holos-brand-navy: #0f172a;
    --holos-brand-slate: #1e293b;

    /* Legacy aliases (gradients toned down for accents only) */
    --holos-brand-cyan: #14b8a6;
    --holos-brand-blue: #0f766e;
    --holos-brand-purple: #0e7490;
    --holos-gradient: linear-gradient(135deg, #0f766e 0%, #0d9488 55%, #14b8a6 100%);
    --holos-gradient-soft: linear-gradient(135deg, rgba(15, 118, 110, 0.12) 0%, rgba(14, 116, 144, 0.10) 100%);

    /* App surfaces — light workspace */
    --holos-bg: #f8fafc;
    --holos-page: #f1f5f9;
    --holos-surface: #ffffff;
    --holos-surface-elevated: #ffffff;
    --holos-card: #ffffff;
    --holos-card-text: #0f172a;
    --holos-card-muted: #64748b;
    --holos-border: #e2e8f0;
    --holos-border-strong: #cbd5e1;
    --holos-text: #0f172a;
    --holos-muted: #64748b;

    /* Accents */
    --holos-accent: var(--holos-brand-primary);
    --holos-accent-dim: #115e59;
    --holos-accent-warm: #f59e0b;

    /* Status — significan lo mismo en todo tema; no son parte de la marca */
    --holos-success: #10b981;
    --holos-warning: #f59e0b;
    --holos-danger: #ef4444;
    --holos-info: #3b82f6;

    /* Fase 2 — tokens que el barrido de color quemado necesita (docs/design/tema-claro-oscuro.md) */
    --holos-on-accent: #ffffff;        /* texto/íconos SOBRE el acento: blanco en los dos temas */
    --holos-muted-2: #94a3b8;          /* gris más claro que muted (placeholders, metadatos) */
    --holos-muted-strong: #475569;     /* gris más fuerte que muted (subtítulos) */
    --holos-text-soft: #334155;        /* texto secundario */
    --holos-success-ink: #047857;      /* texto de estado sobre su tinte */
    --holos-danger-ink: #b91c1c;
    --holos-warning-ink: #b45309;
    --holos-gold: #c9a227;             /* insignias VIP / premium (igual en ambos temas) */
    --holos-gold-ink: #8c6d0f;
    --holos-shadow-ink: #0f172a;       /* base de las sombras con alfa */
    --holos-accent-glow: rgba(15, 118, 110, 0.25); /* halo de foco/hover del acento (antes sin definir) */

    /* Sidebar */
    --holos-sidebar-bg: #0f172a;
    --holos-sidebar-bg-hover: rgba(255, 255, 255, 0.06);
    --holos-sidebar-active: linear-gradient(90deg, #0f766e 0%, #14b8a6 100%);
    --holos-sidebar-text: rgba(248, 250, 252, 0.82);
    --holos-sidebar-text-muted: rgba(148, 163, 184, 0.95);
    --holos-sidebar-border: rgba(255, 255, 255, 0.08);
    --holos-sidebar-width: 260px;

    /* Shell chrome */
    --holos-header-bg: #ffffff;
    --holos-topbar-height: 2.5rem;
    --holos-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --holos-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
    --holos-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06);
    --holos-radius: 12px;            /* superficies: card, modal, KPI */
    --holos-radius-sm: 8px;          /* controles: input, select, botón, tab */
    --holos-radius-xs: 6px;          /* chips inline, celda-marco */
    --holos-radius-pill: 999px;      /* pill — para que el 999 deje de ser literal */

    /* ── ESCALA DEL SISTEMA (docs/design/holos-design-system.md §2) ─────────────────────────────
       Antes vivía en enterprise-ui.css:3-33 y ganaba la cascada por cargar después: DOS fuentes
       de tokens. Desde P0 esta es la ÚNICA :root; ninguna otra hoja define --holos-*. */

    /* Espacio — todo margin/padding/gap sale de acá (ritmo entre bloques = space-4) */
    --holos-space-1: 4px;
    --holos-space-2: 8px;
    --holos-space-3: 12px;
    --holos-space-4: 16px;
    --holos-space-5: 24px;
    --holos-space-6: 32px;
    --holos-space-7: 48px;

    /* Tipografía — TAMAÑOS (--holos-text-* es COLOR). Cuerpo de la app = base (D-UI-1) */
    --holos-font-xs: 11px;           /* eyebrow, th, captions — piso de toda la app */
    --holos-font-sm: 12px;           /* etiquetas, hints, chips, metadatos */
    --holos-font-md: 13px;           /* celdas DATA, secundario denso */
    --holos-font-base: 14px;         /* cuerpo, celdas, botones */
    --holos-font-lg: 16px;           /* título de sección, lead */
    --holos-font-xl: 20px;           /* h1 compacto */
    --holos-font-2xl: 26px;          /* h1 de página */

    /* Alturas de control — cuatro pasos (D-UI-2: input y botón a la MISMA altura) */
    --holos-control-xs: 28px;        /* acción dentro de una fila */
    --holos-control-sm: 32px;        /* OPERATIONAL / DATA */
    --holos-control-md: 36px;        /* input, select, botón, tab */
    --holos-control-lg: 44px;        /* táctil (pointer: coarse) */
    --holos-tile: 68px;              /* tiles táctiles (POS) */
    --holos-control-inline: 40px;    /* stepper/quitar línea bajo toque, con área extendida */

    /* Capas — la escala nace del shell (§2.9). Modal/Drawer/Sheet van al top layer de <dialog>: sin z-index */
    --holos-z-sticky: 10;
    --holos-z-dropdown: 30;
    --holos-z-action-bar: 50;        /* barra de acciones de página: DEBAJO del shell móvil */
    --holos-z-topbar: 200;
    --holos-z-shell-top: 210;
    --holos-z-shell-bottom: 215;
    --holos-z-shell-scrim: 230;
    --holos-z-shell-sheet: 235;
    --holos-z-drawer: 300;
    --holos-z-sidebar-backdrop: 310;
    --holos-z-topnav-menu: 320;
    --holos-z-toast: 400;
    --holos-z-search: 520;

    /* Movimiento */
    --holos-motion-fast: 120ms;
    --holos-motion: 200ms;

    /* Perfil de densidad — default OPERATIONAL; HolosPage lo remapea (§5). Solo las primitivas los leen */
    --holos-page-pad: var(--holos-space-4);
    --holos-card-pad: var(--holos-space-3);
    --holos-row-h: 36px;
    --holos-cell-y: 6px;
    --holos-cell-x: 10px;
    --holos-control-h: var(--holos-control-sm);
    --holos-h1: var(--holos-font-xl);
    --holos-table-text: var(--holos-font-md);

    /* Superficie apagada (franja informativa, agrupador) — --holos-card-muted es un GRIS DE TEXTO, no esto */
    --holos-surface-muted: color-mix(in srgb, var(--holos-text) 4%, var(--holos-surface));

    /* Semánticas de ESTADO que faltaban (info-ink, neutral). Marca ≠ estado: ningún estado de dominio usa el acento */
    --holos-info-ink: #1d4ed8;
    --holos-neutral: #64748b;
    --holos-neutral-ink: #475569;

    /* Tintes SUAVES de estado (P1-A): fondo del chip y de la tarjeta KPI tintada del North Star.
       Un hex por tema —no color-mix— para poder afinar el oscuro a ojo; el texto encima es el -ink. */
    --holos-success-soft: #ecfdf5;
    --holos-warning-soft: #fffbeb;
    --holos-danger-soft: #fef2f2;
    --holos-info-soft: #eff6ff;
    --holos-neutral-soft: #f1f5f9;

    /* Heredados de enterprise-ui.css (shell enterprise). Directriz de Joseph (29-jul): con el menú
       arriba TODAS las pantallas aprovechan el ancho completo — sin tope de 1440px. */
    --holos-enterprise-content-max: none;
    --holos-enterprise-card-padding: var(--holos-space-5);
    --holos-table-header-bg: var(--holos-bg);
    --holos-table-row-hover: color-mix(in srgb, var(--holos-text) 4%, transparent);
    --holos-table-border: var(--holos-border);
    --holos-enterprise-muted: var(--holos-muted);
    --holos-enterprise-surface: var(--holos-surface);
    --holos-enterprise-readonly-bg: var(--holos-page);
    --holos-enterprise-pending-bg: color-mix(in srgb, var(--holos-warning) 10%, var(--holos-surface));
    --holos-enterprise-pending-border: color-mix(in srgb, var(--holos-warning) 40%, var(--holos-surface));

    /* Nav (sidebar) */
    --holos-topnav-bg: var(--holos-sidebar-bg);
    --holos-topnav-text: var(--holos-sidebar-text);
    --holos-topnav-hover: var(--holos-sidebar-bg-hover);
    --holos-topnav-active-bg: rgba(15, 118, 110, 0.22);
    --holos-dropdown-bg: #1e293b;
    --holos-dropdown-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);

    /* KPI accents */
    --holos-kpi-arrival: #0f766e;
    --holos-kpi-inhouse: #10b981;
    --holos-kpi-departure: #0891b2;
}

/* Tema OSCURO — solo cambian la luz y las sombras. Mismo acento, mismos estados. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --holos-brand-primary-soft: color-mix(in srgb, #0f766e 16%, #121c2e);
    --holos-gradient-soft: linear-gradient(135deg, rgba(15, 118, 110, 0.22) 0%, rgba(14, 116, 144, 0.18) 100%);

    --holos-bg: #0f1a2b;
    --holos-page: #0b1220;
    --holos-surface: #121c2e;
    --holos-surface-elevated: #172238;
    --holos-card: #121c2e;
    --holos-card-text: #e6edf7;
    --holos-card-muted: #94a3b8;
    --holos-border: #233149;
    --holos-border-strong: #2f3f5c;
    --holos-text: #e6edf7;
    --holos-muted: #94a3b8;

    --holos-sidebar-bg: #0b1220;
    --holos-header-bg: #121c2e;

    /* Fase 2 — los mismos tokens, en su versión de noche */
    --holos-on-accent: #ffffff;
    --holos-muted-2: #7f8ea3;
    --holos-muted-strong: #b6c2d4;
    --holos-text-soft: #cbd5e1;
    --holos-success-ink: #6ee7b7;
    --holos-danger-ink: #fca5a5;
    --holos-warning-ink: #fcd34d;
    --holos-info-ink: #93c5fd;
    --holos-neutral: #94a3b8;
    --holos-neutral-ink: #cbd5e1;
    --holos-success-soft: #0d2a22;
    --holos-warning-soft: #2b2110;
    --holos-danger-soft: #2d1418;
    --holos-info-soft: #10203a;
    --holos-neutral-soft: #1a2538;
    --holos-gold: #c9a227;
    --holos-gold-ink: #e8c547;
    --holos-shadow-ink: #000000;
    --holos-accent-glow: rgba(20, 184, 166, 0.30);
    --holos-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --holos-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --holos-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
    --holos-dropdown-bg: #0f1a2b;
    --holos-topnav-active-bg: rgba(15, 118, 110, 0.32);
}