/* OneClient Portal — sistema de diseño
 * Tokens basados en wireframes Hi-Fi (2026-04-30)
 * Tipografías: Rubik (display) + Manrope (UI/body)
 * Colores: Orbit Blue · Nebula Core · Titan Purple sobre fondo claro
 */

:root {
    /* — Color base — */
    --color-bg:           #f4f6fb;   /* fondo gris muy claro */
    --color-surface:      #ffffff;
    --color-surface-2:    #f8fafc;
    --color-border:       #e8edf5;
    --color-border-strong:#cbd5e1;

    /* — Texto — */
    --color-text:         #0f172a;
    --color-text-muted:   #475569;
    --color-text-soft:    #64748b;
    --color-text-faint:   #94a3b8;
    --color-text-inverse: #ffffff;

    /* — Marca — */
    --color-orbit:        #2d6cdf;   /* azul primario CTA */
    --color-orbit-strong: #1f55b8;
    --color-orbit-soft:   #eef3ff;
    --color-orbit-tint:   #dde7ff;

    --color-nebula:       #0f1d3d;   /* azul oscuro panel */
    --color-nebula-2:     #1a2952;

    --color-titan:        #6b3df0;   /* morado acento (chrome admin Odoo) */
    --color-titan-strong: #5328d4;
    --color-titan-soft:   #f0ebff;

    /* — Estado — */
    --color-success:      #22c55e;
    --color-success-soft: #dcfce7;
    --color-warn:         #f59e0b;
    --color-warn-soft:    #fef3c7;
    --color-danger:       #ef4444;
    --color-danger-soft:  #fee2e2;
    --color-info:         #0ea5e9;

    /* — Tier (badges) — */
    --tier-bronze-bg:    #f3e3d2; --tier-bronze-fg: #8a5a2b;
    --tier-silver-bg:    #e6eaf0; --tier-silver-fg: #4b5563;
    --tier-gold-bg:      #fef3c7; --tier-gold-fg:   #a16207;
    --tier-platinum-bg:  #ede9fe; --tier-platinum-fg:#6d28d9;

    /* — Tipografías —
       Outfit (display) + Manrope (body) + JetBrains Mono (numbers/code).
       Outfit: geométrica moderna, character premium-tech sin caer en el cliché Inter. */
    --font-display: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body:    'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* — Tamaños tipográficos — */
    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --fs-14: 0.875rem;
    --fs-15: 0.9375rem;
    --fs-16: 1rem;
    --fs-18: 1.125rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-30: 1.875rem;
    --fs-36: 2.25rem;
    --fs-48: 3rem;
    --fs-60: 3.75rem;

    /* — Espaciado — */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
    --sp-9: 48px; --sp-10: 64px;

    /* — Radius — */
    --r-sm: 6px;
    --r-md: 10px;
    --r-lg: 14px;
    --r-xl: 18px;
    --r-pill: 999px;

    /* — Sombras — */
    --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm:  0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md:  0 4px 14px rgba(15, 23, 42, 0.08);
    --shadow-lg:  0 12px 32px rgba(15, 23, 42, 0.12);
    --shadow-focus: 0 0 0 3px rgba(45, 108, 223, 0.25);

    /* — Transiciones —
       Curva ease-out premium (Framer-style): el movimiento sale rápido y se asienta suavemente.
       Mucho más cinematográfico que `ease-out` por defecto. */
    --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --t-fast: 120ms var(--ease-out-soft);
    --t-med:  220ms var(--ease-out-soft);
    --t-slow: 480ms var(--ease-out-soft);
}