/* =============================================================================
   IPSOO — Design tokens (FASE 3.1)

   Tokens centrales del design system. Inspirado en Stripe / Linear / Vercel:
   neutros calmados, primario teal coherente con la PWA (--ios-accent).

   Carga este archivo AL FINAL del bloque CSS para que los aliases
   (--primary, --color-primary, --biz-primary, --ax-brand) se sobrescriban
   apuntando al --ipsoo-primary unico.

   NOTA: NO toca colores hardcoded (#15ab92, etc.) en otros archivos. La
   migracion de esos a tokens va en sub-pasos futuros (3.1b, 3.3).

   NO TOCAR en PWA: las variables --ios-* viven en dashboard-mejorado.php y
   se preservan. Este archivo solo define los nuevos --ipsoo-*.
   ========================================================================== */

:root {
    /* ===================================================================
       COLOR — Brand
       --ipsoo-primary debe coincidir con --ios-accent (#0d9488) para que
       el panel y la PWA usen el mismo verde-azulado.
       =================================================================== */
    --ipsoo-primary:         #0d9488;  /* teal-700 Tailwind, coincide con --ios-accent */
    --ipsoo-primary-hover:   #0f766e;  /* teal-800 */
    --ipsoo-primary-active:  #115e59;  /* teal-900 */
    --ipsoo-primary-soft:    #f0fdfa;  /* teal-50, fondos sutiles */
    --ipsoo-primary-border:  #99f6e4;  /* teal-200, bordes */
    --ipsoo-primary-text:    #ffffff;  /* texto sobre primary */

    /* ===================================================================
       COLOR — Neutral (escala de grises, base UI)
       =================================================================== */
    --ipsoo-bg:              #ffffff;
    --ipsoo-bg-subtle:       #f9fafb;  /* gray-50, fondo de zonas */
    --ipsoo-bg-muted:        #f3f4f6;  /* gray-100, inputs disabled */
    --ipsoo-border:          #e5e7eb;  /* gray-200, bordes normales */
    --ipsoo-border-strong:   #d1d5db;  /* gray-300, bordes input */
    --ipsoo-text:            #111827;  /* gray-900, texto principal */
    --ipsoo-text-strong:     #000000;  /* titulares */
    --ipsoo-text-muted:      #6b7280;  /* gray-500, texto secundario */
    --ipsoo-text-subtle:     #9ca3af;  /* gray-400, hints / placeholders */

    /* ===================================================================
       COLOR — Semantic
       Contraste AA garantizado sobre fondo blanco para los *-text.
       =================================================================== */
    --ipsoo-success:         #16a34a;  /* green-600 */
    --ipsoo-success-soft:    #f0fdf4;
    --ipsoo-success-border:  #bbf7d0;

    --ipsoo-warning:         #d97706;  /* amber-600, mismo tono que banner 2FA */
    --ipsoo-warning-soft:    #fffbeb;
    --ipsoo-warning-border:  #fde68a;

    --ipsoo-danger:          #dc2626;  /* red-600 */
    --ipsoo-danger-soft:     #fef2f2;
    --ipsoo-danger-border:   #fecaca;

    --ipsoo-info:            #2563eb;  /* blue-600 */
    --ipsoo-info-soft:       #eff6ff;
    --ipsoo-info-border:     #bfdbfe;

    /* ===================================================================
       SPACING — Escala de 4px
       =================================================================== */
    --ipsoo-sp-0:   0;
    --ipsoo-sp-1:   4px;
    --ipsoo-sp-2:   8px;
    --ipsoo-sp-3:   12px;
    --ipsoo-sp-4:   16px;
    --ipsoo-sp-5:   20px;
    --ipsoo-sp-6:   24px;
    --ipsoo-sp-8:   32px;
    --ipsoo-sp-10:  40px;
    --ipsoo-sp-12:  48px;
    --ipsoo-sp-16:  64px;

    /* ===================================================================
       RADIUS
       =================================================================== */
    --ipsoo-radius-sm:   4px;
    --ipsoo-radius-md:   8px;
    --ipsoo-radius-lg:   12px;
    --ipsoo-radius-xl:   16px;
    --ipsoo-radius-2xl:  20px;
    --ipsoo-radius-full: 9999px;

    /* ===================================================================
       SHADOW — Sutil, estilo Linear/Stripe
       =================================================================== */
    --ipsoo-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --ipsoo-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06);
    --ipsoo-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
    --ipsoo-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
    --ipsoo-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);

    /* ===================================================================
       TYPOGRAPHY
       =================================================================== */
    --ipsoo-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ipsoo-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    --ipsoo-text-xs:    12px;
    --ipsoo-text-sm:    13px;
    --ipsoo-text-base:  14px;
    --ipsoo-text-md:    15px;
    --ipsoo-text-lg:    16px;
    --ipsoo-text-xl:    18px;
    --ipsoo-text-2xl:   20px;
    --ipsoo-text-3xl:   24px;
    --ipsoo-text-4xl:   30px;

    --ipsoo-leading-tight:   1.25;
    --ipsoo-leading-normal:  1.5;
    --ipsoo-leading-relaxed: 1.625;

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

    /* ===================================================================
       TRANSITION & MOTION
       =================================================================== */
    --ipsoo-transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
    --ipsoo-transition:      180ms cubic-bezier(0.4, 0, 0.2, 1);
    --ipsoo-transition-slow: 280ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ===================================================================
       Z-INDEX SCALE
       =================================================================== */
    --ipsoo-z-base:     1;
    --ipsoo-z-sticky:   10;
    --ipsoo-z-dropdown: 20;
    --ipsoo-z-overlay:  30;
    --ipsoo-z-modal:    40;
    --ipsoo-z-toast:    50;

    /* ===================================================================
       LAYOUT — Panel negocio (sustituye las viejas variables de dashboard.css)
       =================================================================== */
    --ipsoo-sidebar-width:     248px;
    --ipsoo-sidebar-collapsed: 64px;
    --ipsoo-navbar-height:     64px;

    /* ===================================================================
       ALIASES de compatibilidad
       Apuntan todos al primary unico. Esto unifica visualmente el panel
       sin necesidad de tocar los archivos CSS antiguos (app.css,
       dashboard.css, ipsoo-ui.css). Cuando los componentes se migren
       a usar --ipsoo-* directamente, estos aliases dejaran de ser
       necesarios y se podran quitar.
       =================================================================== */
    --primary:           var(--ipsoo-primary);          /* app.css */
    --primary-dark:      var(--ipsoo-primary-hover);    /* app.css */
    --secondary:         var(--ipsoo-success);          /* app.css */
    --danger:            var(--ipsoo-danger);           /* app.css */
    --warning:           var(--ipsoo-warning);          /* app.css */
    --color-primary:        var(--ipsoo-primary);       /* ipsoo-theme (archivado) */
    --color-primary-dark:   var(--ipsoo-primary-hover); /* ipsoo-theme (archivado) */
    --color-primary-light:  var(--ipsoo-primary);       /* ipsoo-theme (archivado) */
    --color-primary-lighter: var(--ipsoo-primary-soft); /* ipsoo-theme (archivado) */
    --biz-primary:       var(--ipsoo-primary);          /* dashboard.css */
    --biz-primary-light: var(--ipsoo-primary-soft);     /* dashboard.css */
    --biz-primary-100:   var(--ipsoo-primary-border);   /* dashboard.css */
    --biz-sidebar-width: var(--ipsoo-sidebar-width);    /* dashboard.css */
    --biz-sidebar-collapsed: var(--ipsoo-sidebar-collapsed); /* dashboard.css */
    --biz-navbar-height: var(--ipsoo-navbar-height);    /* dashboard.css */
    --ax-brand:          var(--ipsoo-primary);          /* ipsoo-ui.css */
}

/* ===================================================================
   FOCUS RING — Estándar de accesibilidad (FASE 3 a11y)
   Aplica un focus visible consistente con :focus-visible.
   =================================================================== */
:focus-visible {
    outline: 2px solid var(--ipsoo-primary);
    outline-offset: 2px;
    border-radius: var(--ipsoo-radius-sm);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--ipsoo-primary);
    outline-offset: 2px;
}