/* ============================================================
   Real Flow AI · Design Tokens
   SSoT visual de la marca · derivado del plan ejecutivo 2026-04-30
   ============================================================
   Roles semánticos (USAR estos en componentes, no los hex sueltos):

     CTA / acción primaria          → --color-action     (naranja MX)
     Positivo / paso ✓ / éxito      → --color-positive   (verde mint)
     Negativo / error / riesgo      → --color-negative   (coral)
     Info / link / IS marker        → --color-info       (cyan)
     Acento editorial / highlight   → --color-accent     (ámbar)
     Marker IA / Claude             → --color-ai         (purple)
     Texto base / muted / dim       → --color-text*

   Convención: el naranja es CTA único (refleja calidez mexicana
   y se distingue del fondo navy). El ámbar es acento editorial,
   no compite con CTA. Verde mint = positivo, no growth-hacker lime.
   ============================================================ */

:root {
  /* --- Backgrounds (azul marino del plan, refinado) ----------- */
  --bg-primary:        #0A1628;  /* deep navy, base */
  --bg-panel:          #131F2E;  /* paneles, cards */
  --bg-subtle:         #0F1A26;  /* hover, banding */
  --bg-elevated:       #1B2838;  /* inputs, chips */
  --bg-deep:           #060E1A;  /* terminales, gráficos */

  /* --- Borders ------------------------------------------------- */
  --border-soft:       #1A2536;
  --border:            #1F2D3D;  /* canónico, 1px */
  --border-strong:     #2D3D52;
  --border-hi:         #2A3A4F;

  /* --- Text ---------------------------------------------------- */
  --text:              #E8EDEF;  /* texto principal */
  --text-muted:        #8B95A0;  /* labels, captions */
  --text-dim:          #5A6470;  /* timestamps, footnotes */
  --text-inverse:      #0A1628;  /* sobre CTA naranja */

  /* --- Acentos canónicos -------------------------------------- */
  --orange:            #E85D04;  /* CTA único - naranja MX del plan */
  --orange-bright:     #FF6E1F;  /* hover sobre orange */
  --orange-bg:         #1F1108;  /* fondo tinted naranja */

  --amber:             #F0A500;  /* acentos editoriales, métricas mono */
  --amber-soft:        #F0A020;
  --amber-bg:          #1A1608;

  --green-mint:        #5DCAA5;  /* positivo, paso ✓ */
  --green-mint-bg:     #0E1F1A;
  --green-bright:      #6FE0B6;  /* hover sobre green */

  --coral:             #FF4C6A;  /* negativo, error */
  --coral-bg:          #1F0D11;

  --cyan:              #4DB8C7;  /* info, links */
  --cyan-bright:       #66D4E5;  /* hover sobre cyan */
  --cyan-soft:         #87C8D4;

  --purple:            #7B61FF;  /* marker IA / Claude */
  --purple-soft:       #A897E2;

  /* --- Roles semánticos (USAR ESTOS) -------------------------- */
  --color-action:           var(--orange);
  --color-action-hover:     var(--orange-bright);
  --color-action-bg:        var(--orange-bg);
  --color-action-fg:        var(--text);   /* blanco sobre naranja */

  --color-positive:         var(--green-mint);
  --color-positive-bg:      var(--green-mint-bg);

  --color-negative:         var(--coral);
  --color-negative-bg:      var(--coral-bg);

  --color-warning:          var(--amber);

  --color-info:             var(--cyan);
  --color-info-strong:      var(--cyan-bright);
  --color-info-soft:        var(--cyan-soft);

  --color-accent:           var(--amber);   /* acento editorial */
  --color-accent-bg:        var(--amber-bg);

  --color-ai:               var(--purple);

  --color-link:             var(--cyan);
  --color-link-hover:       var(--cyan-bright);

  /* --- Spacing scale (4px base) -------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* --- Radii --------------------------------------------------- */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* --- Layout -------------------------------------------------- */
  --container-max:    1240px;
  --container-pad:    24px;
  --section-pad-y:    96px;

  /* --- Z-index ------------------------------------------------- */
  --z-header: 100;
  --z-modal:  1000;

  /* --- Transitions --------------------------------------------- */
  --t-fast:   120ms ease;
  --t-base:   200ms ease;
  --t-slow:   320ms ease;

  /* --- Shadows (sutiles) -------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.3);
  --shadow:     0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0ms;
    --t-base: 0ms;
    --t-slow: 0ms;
  }
}