/* ============================================================
   FENGHI Command Center — DESIGN TOKENS (v4 · Notion)
   ------------------------------------------------------------
   Única fuente de verdad visual. style.css SOLO consume estas
   variables — cero hex sueltos, cero espaciados ad-hoc.
   Estética: calmada, densa-pero-aireada, tipo documento.
   El color SOLO existe en pills/tags/chips (paleta Notion pastel).
   ============================================================ */

:root {
    /* ---- Tipografía ---- */
    --font: ui-sans-serif, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    --fs-xs:    12px;   /* metadatos, ejes, footnotes */
    --fs-sm:    13px;   /* sidebar, botones, tablas, celdas */
    --fs-base:  14px;   /* texto de contenido (base del documento) */
    --fs-md:    14px;   /* alias — todo lo "normal" es 14 */
    --fs-lg:    16px;   /* encabezado de sección (H3 de Notion) */
    --fs-xl:    20px;   /* encabezado grande de bloque (H2 de Notion) */
    --fs-title: 30px;   /* título de página (H1 de documento, 28–32) */

    --lh: 1.5;
    --fw-med: 500;  --fw-sb: 600;  --fw-b: 700;

    /* ---- Color base (Notion light) ----
       La jerarquía de texto se hace con GRIS, no con tamaño. */
    --bg:         #FFFFFF;                  /* contenido */
    --sidebar-bg: #F7F7F5;                  /* off-white cálido del panel */
    --block:      #F7F7F5;                  /* callouts / bloques suaves */
    --block-2:    #F1F1EF;                  /* bloque un punto más marcado */
    --ink:        #37352F;                  /* texto principal (negro cálido) */
    --ink-2:      rgba(55, 53, 47, 0.65);   /* texto secundario (muted) */
    --ink-3:      rgba(55, 53, 47, 0.45);   /* terciario / faint / iconos */
    --line:       rgba(55, 53, 47, 0.09);   /* borde hairline — usar poco */
    --hover:      rgba(55, 53, 47, 0.08);   /* wash gris al hover (afford. nº1) */
    --active:     rgba(55, 53, 47, 0.08);   /* item activo del sidebar = mismo wash */
    --accent:     #2383E2;                  /* azul Notion — 1 botón primario/vista, enlaces */
    --accent-hover: #1B70C9;

    /* ---- Paleta de pills/tags (Notion, pastel desaturado + texto oscuro
            del mismo tono). ÚNICO sitio donde vive el color. ---- */
    --pill-gray-bg:   rgba(227, 226, 224, 0.5); --pill-gray-tx:   #32302C;
    --pill-brown-bg:  #EEE0DA;                  --pill-brown-tx:  #442A1E;
    --pill-orange-bg: #FADEC9;                  --pill-orange-tx: #49290E;
    --pill-yellow-bg: #FDECC8;                  --pill-yellow-tx: #402C1B;
    --pill-green-bg:  #DBEDDB;                  --pill-green-tx:  #1C3829;
    --pill-blue-bg:   #D3E5EF;                  --pill-blue-tx:   #183347;
    --pill-purple-bg: #E8DEEE;                  --pill-purple-tx: #412454;
    --pill-pink-bg:   #F5E0E9;                  --pill-pink-tx:   #4C2337;
    --pill-red-bg:    #FFE2DD;                  --pill-red-tx:    #5D1715;

    /* ---- Semántica (deltas ↑↓, estados). Texto plano desaturado;
            si necesita fondo, usa el pill del mismo tono. ---- */
    --good:  #448361;   /* verde Notion (texto) */
    --watch: #C77D2E;   /* naranja/ámbar (texto) */
    --alert: #D44C47;   /* rojo Notion (texto) */

    /* ---- Forma y profundidad ----
       Superficies planas separadas por tinte de fondo + hairlines.
       La ÚNICA sombra permitida es la de popovers/menús. */
    --r-sm: 4px;
    --r-md: 6px;
    --r-lg: 10px;   /* SOLO superficies grandes (composer de Studio, hero cards) */
    --shadow-pop: rgba(15, 15, 15, 0.05) 0 0 0 1px,
                  rgba(15, 15, 15, 0.1)  0 3px 6px,
                  rgba(15, 15, 15, 0.2)  0 9px 24px;

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

    /* ---- Métricas de layout ---- */
    --content-w: 900px;   /* columna de lectura del documento */
    --side-w:    240px;
    --row-h:     34px;    /* filas de tabla/lista (32–36) */
    --nav-h:     28px;    /* item del sidebar */
    --ctl-h:     28px;    /* botones, inputs, selects compactos */

    /* ---- Movimiento: nada rebota ni desliza ---- */
    --t: 80ms ease;

    /* ---- Tokens de gráficos (SOLO data-viz: barras, líneas, donuts).
            Pasteles Notion: cada tono es el color de texto Notion
            aclarado ~40% hacia blanco. Nunca para chrome de UI. ---- */
    --rev-bar:           #E3C287;   /* ámbar pastel */
    --ch-email:          #E8AB6E;   /* naranja */
    --ch-meta:           #85B2CB;   /* azul */
    --ch-google_ads:     #8FB5A0;   /* verde */
    --ch-direct:         #A3A2A0;   /* gris */
    --ch-organic_search: #E0BD82;   /* amarillo */
    --ch-organic_social: #DA94B9;   /* rosa */
    --ch-ai:             #BCA3D0;   /* morado */
    --ch-referral:       #C5A698;   /* marrón */
    --ch-otros:          #D5D4D1;   /* gris claro */

    /* ---- "En vivo" (War Room, envíos en pruebas): familia verde Notion ---- */
    --war:      var(--good);
    --war-deep: var(--pill-green-tx);
    --war-soft: var(--pill-green-bg);
}