/* ==========================================================================
   ToolsGO — Sistema de tokens
   Dirección: "producto técnico moderno" con vocabulario CAD ejecutado con
   restraint. NO es cream+terracotta, NO es black+acid green, NO broadsheet.
   ========================================================================== */

:root {
    /* === Fondos — paper / ink duality === */
    --paper:        #ECEAE2;   /* warm-grey paper, NOT cream-default. Plano sobre mesa. */
    --paper-2:      #E2DFD5;   /* paper más hundido, secciones alternadas en light */
    --paper-edge:   #D6D2C5;   /* borde del paper */

    --ink:          #0E1014;   /* cool near-black, leve azul. Modo oscuro CAD. */
    --ink-2:        #15171D;   /* surface elevada sobre ink */
    --ink-3:        #1B1E25;   /* surface alta, cards en dark */
    --ink-4:        #252932;   /* surface máxima */

    /* === Texto === */
    --type:         #0E1014;   /* primary on paper */
    --type-soft:    #3D4148;   /* secondary on paper */
    --type-mute:    #6A6E76;   /* tertiary on paper */
    --type-faint:   #8E8F93;   /* mínimo aceptable (≥4.5:1 sobre paper) */

    --type-on-ink:    #EFEAE0; /* primary on ink */
    --type-on-ink-2:  #B4B0A6; /* secondary on ink */
    --type-on-ink-3:  #7A7A7E; /* tertiary on ink */

    /* === Brand: signal electric — más afilado que #2563eb genérico === */
    --signal:       #1A47F5;
    --signal-rgb:   26, 71, 245;
    --signal-deep:  #0E2FAA;
    --signal-soft:  rgba(26, 71, 245, 0.10);
    --signal-line:  rgba(26, 71, 245, 0.28);
    --signal-tint:  rgba(26, 71, 245, 0.04);

    /* === Estado === */
    --live:         #00C896;   /* teal técnico, "corriendo", presencia, datos live */
    --live-rgb:     0, 200, 150;
    --live-soft:    rgba(0, 200, 150, 0.12);
    --warn:         #E8A33D;   /* ámbar, en desarrollo */
    --warn-soft:    rgba(232, 163, 61, 0.12);
    --hazard:       #E5484D;   /* rojo, errores reales */

    /* === Líneas === */
    --line-1:       rgba(14, 16, 20, 0.08);
    --line-2:       rgba(14, 16, 20, 0.14);
    --line-3:       rgba(14, 16, 20, 0.22);
    --line-cad:     rgba(80, 90, 110, 0.16);

    --line-on-ink-1:  rgba(239, 234, 224, 0.07);
    --line-on-ink-2:  rgba(239, 234, 224, 0.14);
    --line-on-ink-3:  rgba(239, 234, 224, 0.22);

    /* === Tipografía — Bricolage + Geist + JetBrains Mono === */
    --font-display: 'Bricolage Grotesque', Georgia, serif;
    --font-body:    'Geist', system-ui, -apple-system, sans-serif;
    --font-mono:    'JetBrains Mono', 'Courier New', monospace;

    /* === Layout === */
    --container-max: 1240px;
    --container-pad: 48px;
    --header-h: 72px;
    --section-py:  120px;
    --section-py-t: 80px;

    /* === Radios — restraint, no chunky === */
    --r-xs: 3px;
    --r-sm: 5px;
    --r:    8px;
    --r-lg: 14px;
    --r-xl: 22px;
    --r-pill: 999px;

    /* === Spacing (4px base) === */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-14: 56px;
    --s-16: 64px;
    --s-20: 80px;
    --s-24: 96px;
    --s-32: 128px;

    /* === Z-index === */
    --z-header: 100;
    --z-overlay: 200;

    /* === Focus (accesibilidad) === */
    --focus: 0 0 0 3px rgba(var(--signal-rgb), 0.40);
    --focus-on-ink: 0 0 0 3px rgba(239, 234, 224, 0.45);

    /* === Easing & motion === */
    --ease:        cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --t-fast:  140ms var(--ease);
    --t:       240ms var(--ease);
    --t-slow:  420ms var(--ease-out);

    /* === Sombras — restraint === */
    --sh-1: 0 1px 2px rgba(14, 16, 20, 0.05);
    --sh-2: 0 4px 12px rgba(14, 16, 20, 0.06), 0 1px 2px rgba(14, 16, 20, 0.04);
    --sh-3: 0 12px 28px rgba(14, 16, 20, 0.10), 0 2px 6px rgba(14, 16, 20, 0.05);
    --sh-4: 0 24px 56px rgba(14, 16, 20, 0.18), 0 4px 12px rgba(14, 16, 20, 0.08);
    --sh-signal: 0 8px 24px rgba(var(--signal-rgb), 0.30);

    --sh-on-ink-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --sh-on-ink-2: 0 8px 24px rgba(0, 0, 0, 0.5);

    /* === Retícula CAD (vocabulario, no decoración) === */
    --grid-cad:
        linear-gradient(to right,  rgba(80, 90, 110, 0.10) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(80, 90, 110, 0.10) 1px, transparent 1px);

    --grid-cad-soft:
        linear-gradient(to right,  rgba(80, 90, 110, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(80, 90, 110, 0.05) 1px, transparent 1px);

    --grid-cad-on-ink:
        linear-gradient(to right,  rgba(239, 234, 224, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(239, 234, 224, 0.05) 1px, transparent 1px);
}