/* =============================================
   TeamOrbit v2.0 — Bankingly Design Tokens
   =============================================
   Fuente única de verdad para colores, tipografía,
   spacing, radius y shadows. Cargar ANTES de site.css.

   Consenso del equipo de diseño:
   - Orange #E94912 anclado en la marca Bankingly
   - Sidebar oscuro neutro + naranja como accent (no chrome)
   - Cards: backoffice sin border, portal con border sutil
   - Pills bg-suave + dot + texto oscuro (no fondo sólido)
   - Sin translateY en hover (subir shadow, no mover chrome)
   ============================================= */

:root {
    /* ===== ORANGE — Bankingly brand ===== */
    --orange-50:  #FFF4F0;
    --orange-100: #FFE2D6;
    --orange-200: #FFC4AD;
    --orange-300: #FF9B78;
    --orange-400: #F57043;
    --orange-500: #E94912;  /* PRIMARY brand */
    --orange-600: #C93A0A;  /* active/pressed */
    --orange-700: #A12D06;  /* text sobre fondos claros (AA) */
    --orange-800: #7A2105;
    --orange-900: #4D1503;

    /* ===== NEUTRAL SLATE ===== */
    --slate-50:  #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-300: #CBD5E1;
    --slate-400: #94A3B8;
    --slate-500: #64748B;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1E293B;
    --slate-900: #0F172A;

    /* ===== MISSION CONTROL — warm paper canvas (v3.0) =====
       Base Attio/Ramp: canvas cálido, ink obsidian, hairlines cálidos.
       No hay grises fríos aquí — todo tiene warm cast. */
    --paper:       #FAFAF7;   /* canvas principal — warm cream, no puro blanco */
    --paper-lift:  #FFFFFF;   /* cards que se levantan del paper */
    --paper-dim:   #F2F1EC;   /* sidebar dimmer que canvas (Linear rule) */
    --paper-well:  #EFEDE6;   /* inputs / wells hundidos */

    --ink:         #0C0A08;   /* text primary — obsidian con warm cast */
    --ink-2:       #3B3730;   /* text secondary */
    --ink-3:       #6B6459;   /* text muted */
    --ink-4:       #8F887C;   /* text disabled / captions */

    --hairline:        #E7E4DC;   /* replaces --border — warm hairline */
    --hairline-soft:   #F0EDE5;
    --hairline-strong: #DCD8CE;

    /* ===== ALIASES SEMÁNTICOS ===== */
    --bg-page:    var(--paper);
    --bg-card:    var(--paper-lift);
    --bg-muted:   var(--paper-dim);

    --text-primary:   var(--ink);
    --text-secondary: var(--ink-2);
    --text-muted:     var(--ink-3);
    --text-disabled:  var(--ink-4);

    --border:        var(--hairline);
    --border-soft:   var(--hairline-soft);
    --border-strong: var(--hairline-strong);

    /* Brand aliases */
    --primary:       var(--orange-500);
    --primary-hover: var(--orange-600);
    --primary-soft:  var(--orange-100);
    --primary-text:  var(--orange-700);

    /* ===== SEMANTIC ===== */
    --success-bg:    #ECFDF5;
    --success-border:#A7F3D0;
    --success:       #059669;

    --warning-bg:    #FFFBEB;
    --warning-border:#FDE68A;
    --warning:       #D97706;

    --danger-bg:     #FEF2F2;
    --danger-border: #FECACA;
    --danger:        #DC2626;

    --info-bg:       #EFF6FF;
    --info-border:   #BFDBFE;
    --info:          #2563EB;

    /* ===== COSMIC — v2.0 secondary accent (uso < 10%) =====
       Solo en signature moments: orbital motif, hero auth, empty states,
       algún trend indicator puntual. NO usar como chrome. */
    --cosmic-50:  #F5F3FF;
    --cosmic-100: #EDE9FE;
    --cosmic-200: #DDD6FE;
    --cosmic-300: #C4B5FD;
    --cosmic-400: #A78BFA;
    --cosmic-500: #7C3AED;  /* nebula violet — el acento */
    --cosmic-600: #6D28D9;
    --cosmic-700: #5B21B6;
    --cosmic-900: #2E1065;

    --secondary:      var(--cosmic-500);
    --secondary-soft: var(--cosmic-100);
    --secondary-text: var(--cosmic-700);

    /* ===== TIPOGRAFÍA ===== */
    /* Stack v2.0 con roles diferenciados:
       - display: hero, brand, section eyebrows (con carácter)
       - body:    UI/lectura general
       - mono:    números grandes (KPI, telemetría) → sensación de instrumento */
    --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;
    --font-numeric: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

    --fs-display: 32px;
    --fs-h1:      24px;
    --fs-h2:      20px;
    --fs-h3:      16px;
    --fs-h4:      14px;
    --fs-body:    14px;
    --fs-sm:      13px;
    --fs-caption: 12px;
    --fs-micro:   11px;

    --lh-tight:  1.2;
    --lh-snug:   1.3;
    --lh-normal: 1.4;
    --lh-relaxed:1.55;

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

    /* ===== RADIUS ===== */
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* ===== SHADOWS — Mission Control:
       hairline shadow reemplaza border 1px en cards estructurales.
       Se ve nítido en Retina y no compone doble grosor al anidar. */
    --hairline-shadow:      0 0 0 1px rgba(12, 10, 8, 0.06);
    --hairline-shadow-lift: 0 0 0 1px rgba(12, 10, 8, 0.06), 0 1px 2px rgba(12, 10, 8, 0.04);

    --shadow-xs:    0 1px 2px rgba(12, 10, 8, 0.04);
    --shadow-sm:    var(--hairline-shadow-lift);
    --shadow-md:    0 0 0 1px rgba(12, 10, 8, 0.06), 0 4px 12px rgba(12, 10, 8, 0.06);
    --shadow-lg:    0 0 0 1px rgba(12, 10, 8, 0.08), 0 12px 32px -8px rgba(12, 10, 8, 0.14);
    --shadow-focus: 0 0 0 3px rgba(233, 73, 18, 0.18);
    --shadow-focus-2: 0 0 0 3px rgba(233, 73, 18, 0.18), 0 0 0 1px var(--orange-500);

    /* ===== SPACING ===== */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  20px;
    --space-6:  24px;
    --space-8:  32px;
    --space-10: 40px;
    --space-14: 56px;
    --space-20: 80px;

    /* ===== MOTION ===== */
    --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast:  120ms;
    --dur-base:  180ms;
    --dur-slow:  280ms;

    /* ===== SIDEBAR — Mission Control:
       Dimmer que el content area (Attio rule). Warm paper, no dark.
       Preserva el orange como accent para item activo. */
    --sidebar-width:        248px;
    --sidebar-bg:           var(--paper-dim);
    --sidebar-text:         var(--ink-3);
    --sidebar-text-hover:   var(--ink);
    --sidebar-active-bg:    rgba(233, 73, 18, 0.13);
    --sidebar-active-text:  var(--orange-700);
    --sidebar-active-border:var(--orange-500);
    --sidebar-hover-bg:     rgba(12, 10, 8, 0.05);
    --sidebar-divider:      rgba(12, 10, 8, 0.06);
    --topbar-height:        56px;
}

/* ===== TYPOGRAPHY BASELINE ===== */
* { font-family: var(--font-family); }

/* Números tabulares en KPIs, tablas, contadores — alinea perfecto al cambiar de valor */
.tabular,
.kpi-value,
.kpi-mini,
.inc-table td,
.t td,
table.t tbody td,
.meta-list .value,
td.numeric,
.numeric { font-variant-numeric: tabular-nums; }

/* ===== UTILITIES ===== */
.text-primary-brand { color: var(--primary); }
.bg-primary-brand   { background: var(--primary); }
.bg-primary-soft    { background: var(--primary-soft); }