/* ===========================================================================
   OK PREMIUM POOL OS — design tokens
   Dark navy · blue · cyan · glass. Un solo lugar donde vive el color.
   =========================================================================== */
:root {
  /* --- superficies ------------------------------------------------------ */
  --bg-0:        #060B18;   /* fondo de página */
  --bg-1:        #0A1122;   /* paneles */
  --bg-2:        #0E1730;   /* cards */
  --bg-3:        #13203F;   /* hover / elevación */
  --bg-inset:    #070D1C;   /* inputs, pozos */

  --glass:       rgba(18, 31, 60, 0.62);
  --glass-hi:    rgba(30, 48, 88, 0.72);
  --glass-brd:   rgba(120, 165, 235, 0.14);
  --glass-brd-hi:rgba(120, 190, 250, 0.28);

  /* --- marca ------------------------------------------------------------ */
  --blue-300:    #7FB4FF;
  --blue-400:    #4A90F7;
  --blue-500:    #1E6FE8;
  --blue-600:    #1257C4;
  --cyan-300:    #6FE6F5;
  --cyan-400:    #22D3EE;
  --cyan-500:    #06B6D4;
  --aqua:        #35E0C5;

  /* --- texto ------------------------------------------------------------ */
  --ink:         #EDF3FF;
  --ink-2:       #AFC2E0;
  --ink-3:       #7B8DB0;
  --ink-4:       #56678A;
  --ink-on-cyan: #04131C;

  /* --- estado (semáforo del engine) ------------------------------------ */
  --st-normal:      #2FD48A;
  --st-normal-bg:   rgba(47, 212, 138, 0.13);
  --st-attention:   #F5C542;
  --st-attention-bg:rgba(245, 197, 66, 0.13);
  --st-correction:  #FF9A3D;
  --st-correction-bg:rgba(255, 154, 61, 0.13);
  --st-critical:    #FF5C71;
  --st-critical-bg: rgba(255, 92, 113, 0.14);
  --st-invalid:     #C98BFF;
  --st-invalid-bg:  rgba(201, 139, 255, 0.14);
  --st-unconfig:    #8FA3C4;
  --st-unconfig-bg: rgba(143, 163, 196, 0.12);
  --st-missing:     #62748F;
  --st-missing-bg:  rgba(98, 116, 143, 0.12);

  --demo:          #B084F5;
  --demo-bg:       rgba(176, 132, 245, 0.13);

  /* --- gradientes ------------------------------------------------------- */
  --grad-brand:  linear-gradient(135deg, #1E6FE8 0%, #06B6D4 100%);
  --grad-panel:  linear-gradient(160deg, rgba(31,60,112,.38) 0%, rgba(10,17,34,0) 60%);
  --grad-halo:   radial-gradient(900px 420px at 12% -8%, rgba(34,211,238,.16), transparent 62%),
                 radial-gradient(760px 380px at 92% 0%, rgba(30,111,232,.20), transparent 60%);

  /* --- tipografía ------------------------------------------------------- */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-xs: .6875rem;  /* 11 */
  --fs-sm: .78125rem; /* 12.5 */
  --fs-md: .875rem;   /* 14 */
  --fs-lg: 1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.375rem;

  /* --- espaciado y forma ------------------------------------------------ */
  --sp-1: .25rem; --sp-2: .5rem;  --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem;   --sp-7: 3rem;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px;

  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 8px 24px -8px rgba(0,0,0,.55);
  --sh-3: 0 24px 60px -18px rgba(0,0,0,.7);
  --sh-glow: 0 0 0 1px rgba(34,211,238,.35), 0 8px 34px -10px rgba(34,211,238,.45);

  --sidebar-w: 248px;
  --topbar-h: 60px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 180ms;
}

/* El sistema es dark-first por diseño. Si alguien fuerza light, no rompemos:
   mantenemos el mismo esquema en vez de entregar contraste roto. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { color-scheme: dark; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}