/* HUBI design system — tokens. Única fuente de color, tipo, espacio, forma y movimiento.
   Grafito de Ferced Labs + acento y tipografías del dispositivo. Documentado en docs/site/design-system.md
   y visible en /sistema/. Los componentes usan solo estas variables. */
:root {
  color-scheme: dark;

  /* Superficies: el grafito es el lienzo; las capas suben con blanco translúcido. */
  --bg: #0e1011;
  --bg-sunken: #0a0a0b;
  --bg-screen: #0b0b0c;           /* fondo de la pantalla del dispositivo */
  --surface-1: #ffffff08;
  --surface-2: #ffffff0f;
  --surface-3: #ffffff17;

  /* Texto: 4 niveles. --text-3 es el mínimo para texto informativo (≥ 6:1 sobre --bg). */
  --text: #ffffff;
  --text-2: #ffffffc7;
  --text-3: #ffffff9e;
  --text-4: #ffffff66;            /* placeholders y deshabilitado, nunca texto que haya que leer */
  --text-inverse: #000000;

  /* Líneas */
  --line-soft: #ffffff0d;
  --line: #ffffff1a;
  --line-strong: #ffffff42;

  /* Acento (el azul del dispositivo, 0x3D7BFF) y estados */
  --accent: #3d7bff;
  --accent-hover: #5b90ff;
  --accent-soft: #3d7bff24;
  --accent-text: #a9c4ff;
  --ok: #3ddc84;      --ok-soft: #3ddc8412;      --ok-line: #3ddc8459;      --ok-text: #7ee8ad;
  --warn: #ffb224;    --warn-soft: #ffb22410;    --warn-line: #ffb22459;    --warn-text: #ffcf7a;
  --error: #ff6b6b;   --error-soft: #ff6b6b12;   --error-line: #ff6b6b66;   --error-text: #ff9f9f;
  --focus: #9dc4ff;

  /* Tipografía: Bricolage Grotesque para títulos (personalidad), Inter para leer y JetBrains Mono para
     rótulos y datos (las dos últimas, las mismas que dibuja el dispositivo). */
  --font-display: "Bricolage Grotesque", Inter, system-ui, sans-serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --fs-label: 11px;               /* rótulos mono en mayúsculas */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-body: 17px;
  --fs-lg: 19px;
  --fs-xl: 24px;
  --fs-h2: clamp(32px, 4.4vw, 52px);
  --fs-h1: clamp(40px, 6vw, 72px);
  --fs-display: clamp(52px, 9vw, 112px);
  --lh-tight: 1.02;
  --lh-snug: 1.25;
  --lh-body: 1.55;
  --tracking-display: -.04em;
  --tracking-heading: -.025em;
  --tracking-label: .12em;

  /* Espacio: escala de 4 px */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px;

  /* Forma */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-pill: 9999px;

  /* Elevación */
  --shadow-1: 0 1px 0 #ffffff0f inset, 0 8px 24px #00000040;
  --shadow-pop: 0 24px 64px #00000080;
  --glow-accent: 0 40px 120px -40px #3d7bff40;

  /* Movimiento */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .15s;
  --dur-2: .3s;

  /* Controles y layout */
  --control-sm: 36px;
  --control: 44px;
  --control-lg: 52px;
  --shell: min(1160px, 100% - 48px);
  --header-h: 64px;
  --banner-h: 0px;
}
@media (max-width: 640px) {
  :root { --shell: min(1160px, 100% - 32px); --header-h: 56px; --fs-body: 16px; }
}