/* tokens.css — sistema de tokens de diseño Probusol (FUENTE ÚNICA).

   Este archivo es la **fuente única** para spacing, radius, tipografía y
   safe-area-insets. Lo consumen los tres stacks (reports, meetings, mrp)
   vía `make sync-ui` — NO editar la copia en cada servicio: editar acá y
   ejecutar `make sync-ui` para propagar.

   Carga ANTES de base.css/style.css para que las reglas posteriores
   puedan resolver var(--space-*) etc. */

:root {
    /* ── spacing ─────────────────────────────────────────────────────
       Escala lineal con factor 2x. La numeración refleja la jerarquía
       visual: 1 = mínimo (chip interno), 5 = máximo (separación entre
       grandes secciones). No agregar tokens intermedios sin discutir
       — la rigidez de la escala es feature, no bug. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;

    /* ── iOS safe area insets (Dynamic Island / notch / home indicator) ─
       env(safe-area-inset-*) devuelve > 0 en iPhones/iPads con island/notch
       cuando el documento usa <meta viewport-fit=cover> (set en base.html).
       Browsers sin soporte devuelven el fallback 0px → no-op en desktop.

       PATRÓN DE USO (ver style.css de cada stack):
       En PWA standalone (apple-mobile-web-app-capable + status-bar-style
       black-translucent) el reloj/Dynamic Island se dibuja sobre el
       viewport. Todo elemento sticky/fixed top:0 (header, sidebar, drawer)
       DEBE proteger su padding-top contra el inset. Usar el patrón:
           padding-top: max(BASELINE, var(--safe-area-top));
       — NO `calc(BASELINE + var(--safe-area-top))` porque dobla-cuenta
       el padding base (iPad landscape PWA da inset 24px y baseline 16-20px;
       la suma queda 40-44px excesiva. max() resuelve a max(16,24)=24px,
       suficiente para limpiar el reloj). Idéntico para padding-bottom con
       --safe-area-bottom (home indicator).
       Cuidado con iPad landscape: el viewport supera 1024px → cae en el
       bloque DESKTOP (no en @media max-width:1024px) — aplicar el fix
       también en la regla desktop, no solo en mobile.css. */
    --safe-area-top:    env(safe-area-inset-top,    0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left:   env(safe-area-inset-left,   0px);
    --safe-area-right:  env(safe-area-inset-right,  0px);

    /* ── breakpoint mobile ───────────────────────────────────────────
       Único punto de ruptura entre comportamiento desktop y mobile.
       1024 px cubre: iPhone portrait/landscape, iPad mini, iPad
       estándar portrait/landscape. >1024 px = desktop / iPad pro /
       notebook.

       NO usar como var en `@media` — CSS custom properties no son
       válidas dentro de queries. Hardcodear 1024px en cada `@media`
       y mantener este comentario como fuente única de verdad. */

    /* ── border-radius semántico ─────────────────────────────────────
       Cuatro variantes en vez de un único --radius. Cada una tiene un
       uso claramente acotado: chip < botón < card < pill. */
    --radius-chip: 4px;    /* badge, chip interno, pill pequeña dentro de listas */
    --radius-btn:  6px;    /* botón, select, input, search */
    --radius-card: 8px;    /* card, panel, popover, modal, banner */
    --radius-pill: 999px;  /* pill toggle, badge redondo, chip de área */

    /* ── tipografía ──────────────────────────────────────────────────
       Escala basada en la jerarquía de información del producto. La
       numeración va por uso, no por tamaño absoluto: --text-base es la
       talla "general". */
    --text-xs:   11px;     /* metadatos, labels, hints muy chicos */
    --text-sm:   13px;     /* texto secundario, subtítulos, badges */
    --text-base: 14px;     /* texto general, section title, header h1 */
    --text-md:   16px;     /* texto destacado dentro de cards/áreas */
    --text-lg:   18px;     /* título de empty-state, chart title */
    --text-xl:   22px;     /* page title / hero title */
    --text-kpi:  24px;     /* valor numérico de KPI / card */
    --text-kpi-hero: 44px; /* hero KPI de cockpit / próxima reunión */

    /* ── motion (canonical) ──────────────────────────────────────────
       Tres curvas, cada una con un intent claro (filosofía emil-design-eng):
         --ease       material standard, para hover/color (cambios sutiles
                      donde no querés "punch")
         --ease-out   strong ease-out, para entrar/salir/press feedback —
                      las built-in CSS easings son débiles y se sienten
                      sluggish en 120Hz
         --ease-drawer  iOS-like, para slide-ins (drawers, sheets, toasts)

       Duraciones agrupadas por intent: 80ms es jitter en 120Hz (10
       frames), 140ms es el sweet spot de hover responsivo, 180–220ms
       para tab slides / banner transitions. */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --dur-fast:  100ms;    /* press feedback (scale), instant flips */
    --dur-base: 140ms;     /* color/bg transitions, tooltips */
    --dur-slow: 180ms;     /* banner state, kpi card hover */
    --dur-tab:  220ms;     /* tab underline slide */

    /* Charts son EXPLICACIÓN, no UI de interacción — excepción a la
       regla <300ms (emil-design-eng): la entrada de líneas puede durar
       600ms con ease-out fuerte. El hover sobre puntos sigue siendo
       instantáneo. Jamás ease-in en charts (se siente sluggish). */
    --ease-chart-enter: cubic-bezier(0.23, 1, 0.32, 1);
    --dur-chart-enter:  600ms;

    /* stagger paso: agnóstico de qué se anima, usado vía nth-child o
       custom property --i en el template (`style="--i: 3"`). 50ms es el
       sweet spot — 30 ms se siente apurado, 80 ms ya retrasa la
       interacción. */
    --stagger-step: 50ms;

    /* ── spring (B.3.2 polish-plan) ────────────────────────────────────
       Curva con overshoot mínimo para press feedback en buttons.
       Combinada con scale(0.96) en :active da la sensación táctil que
       Emil Kowalski describe como "el botón respira al presionarlo". */
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-spring: 280ms;

    /* ── focus ring (B.3.5 polish-plan) ────────────────────────────────
       outline 2px accent + offset variable. Buttons reciben más offset
       (3px) al recibir foco para "respirar" más. */
    --focus-ring:           2px solid var(--accent);
    --focus-ring-offset:    2px;
    --focus-ring-offset-btn: 3px;

    /* ── color signature live (B.4 polish-plan) ────────────────────────
       Electric cyan para indicadores live/streaming. SOLO aparece en:
         1. sync-banner cuando refresh está en curso
         2. live-dot al lado de items con update reciente
         3. focus ring on INPUTS (NO buttons)
         4. underline en sticky filter bar cuando hay filter activo
       Regla dura: máximo 3 instancias simultáneas en un viewport. */
    --accent-live:      #00E5FF;
    --accent-live-soft: color-mix(in srgb, var(--accent-live) 20%, transparent);

    /* ── warm-dark companion neutrals (K.3 ui-ux-pro-max) ──────────────
       Reemplaza zinc/slate genéricos por neutros con un toque cálido
       (stone-* hue) que armonizan con --accent #F2A900 sin tocar --bg.
       Aplicar solo a --fg-muted / --fg-faint del paleta base.css. */
    --warm-100: #f5f4f0;   /* fg en light theme (papel pergamino) */
    --warm-300: #d6d3c8;   /* hover light surfaces */
    --warm-500: #a09c8e;   /* fg-muted en dark theme */
    --warm-700: #5e5b54;   /* fg-faint en dark theme */
    --warm-900: #232220;   /* surfaces secundarias dark */

    /* ── mono font stack (K.1 #1 / K.3 ui-ux-pro-max) ──────────────────
       SOLO en .numeric (KPIs, IDs, timestamps, %), .kbd, code. Inter
       sigue para texto largo. JetBrains Mono Variable self-hosted por
       fonts.css o degradar a system stack. */
    --font-mono: 'JetBrains Mono', 'Geist Mono', ui-monospace, SFMono-Regular,
                  Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/*
  TABLA DE TOKENS — referencia rápida
  -----------------------------------
  spacing
    --space-1     4px      espaciado mínimo interno (gap entre bullet y label)
    --space-2     8px      espaciado estándar entre elementos cercanos
    --space-3     16px     padding de cards, gap principal de grids
    --space-4     24px     separación entre secciones medianas
    --space-5     32px     padding horizontal del header, separaciones grandes

  border-radius
    --radius-chip   4px    chips internos, items chicos
    --radius-btn    6px    botones, inputs, selects
    --radius-card   8px    cards, paneles, popovers, modales, banners
    --radius-pill   999px  pills, badges redondos, chips de área

  tipografía
    --text-xs       11px   metadatos, labels
    --text-sm       13px   texto secundario, subtítulos, badges, hints
    --text-base     14px   texto general, section-title, header h1
    --text-md       16px   texto destacado en cards/áreas
    --text-lg       18px   título de empty-state, chart title
    --text-xl       22px   page-title / hero title
    --text-kpi      24px   valor numérico de KPI / card
    --text-kpi-hero 44px   hero KPI / contador grande

  motion
    --ease          cubic-bezier(0.4, 0, 0.2, 1)
    --dur-fast      80ms
    --dur-base     140ms
    --dur-slow     180ms

  Notas
    - Algunos componentes legacy todavía usan valores intermedios
      (12.5px, 13.5px en tipografía). Se normalizan progresivamente al
      token más cercano. Si encontrás uno nuevo, mapealo o documentalo
      como excepción explícita.
*/