/*
 * TurnoPro Design Tokens
 * ----------------------
 * Variables CSS base del sistema. Diseñadas para sobreescribirse
 * por tenant (color de marca) via <style> inline en engine.php.
 *
 * No incluye reset ni componentes. Solo tokens.
 * Carga este archivo PRIMERO; luego base.css y components.css.
 */

:root {
    /* ---- Brand (sobrescribible por tenant vía brand.js) ----
       Usamos rgba(var(--tp-brand-rgb), a) en vez de color-mix() para que
       funcione en CUALQUIER navegador (color-mix es CSS 2023). brand.js
       recalcula --tp-brand / --tp-brand-rgb / --tp-brand-strong / -contrast
       a partir del color del tenant. */
    --tp-brand: #FF7A00;            /* naranja default (más saturado y moderno) */
    --tp-brand-rgb: 255, 122, 0;
    --tp-brand-contrast: #ffffff;   /* texto sobre fondo de marca */
    --tp-brand-strong: #C85E00;     /* tono oscuro para hovers/gradientes */
    --tp-brand-soft:   rgba(var(--tp-brand-rgb), 0.12);
    --tp-brand-soft-2: rgba(var(--tp-brand-rgb), 0.20);
    --tp-brand-tint:   rgba(var(--tp-brand-rgb), 0.06);

    /* ---- Escala de grises ---- */
    --tp-gray-50:  #F8FAFC;
    --tp-gray-100: #F1F5F9;
    --tp-gray-200: #E2E8F0;
    --tp-gray-300: #CBD5E1;
    --tp-gray-400: #94A3B8;
    --tp-gray-500: #64748B;
    --tp-gray-600: #475569;
    --tp-gray-700: #334155;
    --tp-gray-800: #1E293B;
    --tp-gray-900: #0F172A;

    /* ---- Semánticos ---- */
    --tp-bg:           var(--tp-gray-50);
    --tp-surface:      #FFFFFF;
    --tp-surface-alt:  var(--tp-gray-100);
    --tp-border:       var(--tp-gray-200);
    --tp-border-strong:var(--tp-gray-300);
    --tp-text:         var(--tp-gray-900);
    --tp-text-muted:   var(--tp-gray-500);
    --tp-text-subtle:  var(--tp-gray-400);

    /* ---- Estados (con su versión "soft" en rgba: adapta a claro/oscuro) ---- */
    --tp-success: #16A34A;  --tp-success-rgb: 22,163,74;   --tp-success-soft: rgba(22,163,74,0.13);
    --tp-warning: #D97706;  --tp-warning-rgb: 217,119,6;   --tp-warning-soft: rgba(217,119,6,0.14);
    --tp-danger:  #DC2626;  --tp-danger-rgb:  220,38,38;   --tp-danger-soft:  rgba(220,38,38,0.12);
    --tp-info:    #2563EB;  --tp-info-rgb:    37,99,235;   --tp-info-soft:    rgba(37,99,235,0.12);

    /* ---- Tipografía ---- */
    --tp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --tp-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --tp-text-xs:   0.75rem;   /* 12 */
    --tp-text-sm:   0.875rem;  /* 14 */
    --tp-text-base: 1rem;      /* 16 */
    --tp-text-lg:   1.125rem;  /* 18 */
    --tp-text-xl:   1.25rem;   /* 20 */
    --tp-text-2xl:  1.5rem;    /* 24 */
    --tp-text-3xl:  1.875rem;  /* 30 */
    --tp-text-4xl:  2.25rem;   /* 36 */

    --tp-leading-tight:  1.25;
    --tp-leading-normal: 1.5;
    --tp-leading-loose:  1.75;

    --tp-tracking-tight: -0.015em;
    --tp-tracking-wide:   0.025em;

    --tp-weight-regular:  400;
    --tp-weight-medium:   500;
    --tp-weight-semibold: 600;
    --tp-weight-bold:     700;

    /* ---- Espaciado (escala 4px) ---- */
    --tp-space-0:  0;
    --tp-space-1:  0.25rem;   /* 4  */
    --tp-space-2:  0.5rem;    /* 8  */
    --tp-space-3:  0.75rem;   /* 12 */
    --tp-space-4:  1rem;      /* 16 */
    --tp-space-5:  1.25rem;   /* 20 */
    --tp-space-6:  1.5rem;    /* 24 */
    --tp-space-8:  2rem;      /* 32 */
    --tp-space-10: 2.5rem;    /* 40 */
    --tp-space-12: 3rem;      /* 48 */
    --tp-space-16: 4rem;      /* 64 */

    /* ---- Bordes / radios ---- */
    --tp-radius-sm:  6px;
    --tp-radius:     10px;
    --tp-radius-md:  12px;
    --tp-radius-lg:  16px;
    --tp-radius-xl:  20px;
    --tp-radius-2xl: 28px;
    --tp-radius-full: 9999px;

    /* ---- Sombras ---- */
    --tp-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --tp-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --tp-shadow:    0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
    --tp-shadow-md: 0 10px 25px -8px rgba(15, 23, 42, 0.12), 0 4px 6px -4px rgba(15, 23, 42, 0.05);
    --tp-shadow-lg: 0 24px 50px -12px rgba(15, 23, 42, 0.18), 0 8px 16px -8px rgba(15, 23, 42, 0.08);
    --tp-shadow-xl: 0 40px 80px -20px rgba(15, 23, 42, 0.22), 0 12px 24px -12px rgba(15, 23, 42, 0.12);
    --tp-shadow-brand: 0 12px 32px -8px rgba(var(--tp-brand-rgb), 0.45);
    --tp-shadow-accent: 0 14px 36px -10px rgba(var(--accent-rgb, var(--tp-brand-rgb)), 0.45);

    /* ---- Palette de acentos (para tiles/categorías) ---- */
    --tp-accent-blue:    #3B82F6;
    --tp-accent-purple:  #8B5CF6;
    --tp-accent-pink:    #EC4899;
    --tp-accent-emerald: #10B981;
    --tp-accent-amber:   #F59E0B;
    --tp-accent-rose:    #F43F5E;
    --tp-accent-teal:    #14B8A6;
    --tp-accent-indigo:  #6366F1;

    /* ---- Sidebar (admin enterprise: oscuro siempre) ---- */
    --tp-sidebar-bg:     #0f172a;
    --tp-sidebar-bg-2:   #131f38;
    --tp-sidebar-border: #1e293b;
    --tp-sidebar-text:   #cbd5e1;
    --tp-sidebar-muted:  #64748b;
    --tp-sidebar-active: #1e293b;

    /* ---- Layout ---- */
    --tp-container: 1200px;
    --tp-container-narrow: 720px;

    /* ---- Animación ---- */
    --tp-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --tp-transition:      180ms cubic-bezier(0.4, 0, 0.2, 1);
    --tp-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --tp-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* ---- Z-index (alineado con Bootstrap modal=1050) ---- */
    --tp-z-base:    0;
    --tp-z-raised:  10;
    --tp-z-dropdown: 1000;
    --tp-z-overlay: 1040;
    --tp-z-modal:   1050;
    --tp-z-toast:   1080;
}

/* Modo oscuro opt-in (añadir clase .tp-dark al <body>) */
.tp-dark {
    --tp-bg:           #0b1220;   /* azul-noche, no negro puro */
    --tp-surface:      #131c2e;
    --tp-surface-alt:  #1c2840;
    --tp-border:       #263349;
    --tp-border-strong:#36475f;
    --tp-text:         #f1f5f9;
    --tp-text-muted:   #94a3b8;
    --tp-text-subtle:  #64748b;
    /* brand-soft/-2 ya son rgba → se adaptan al fondo oscuro sin overrides */
    /* Sombras más sutiles sobre fondo oscuro */
    --tp-shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
    --tp-shadow-sm: 0 2px 6px rgba(0,0,0,0.45);
    --tp-shadow:    0 4px 14px rgba(0,0,0,0.5);
    --tp-shadow-md: 0 8px 24px rgba(0,0,0,0.55);
    --tp-shadow-lg: 0 16px 40px rgba(0,0,0,0.6);
    color-scheme: dark;
}
/* Transición suave al alternar tema */
.tp-page, .tp-page * { transition: background-color .25s ease, border-color .25s ease, color .2s ease; }