/* Hilo — design tokens.
 *
 * Fuente: C:\Users\rodri\Downloads\hilorigin logo.png (el logo real). Azul y coral leídos de esa
 * imagen — si el founder tiene el archivo fuente (Canva/Figma) con hex exactos, esos mandan sobre
 * estos valores. Tipografía (Sora/Inter) es una lectura visual del wordmark, a confirmar con el
 * founder antes de darla por definitiva.
 *
 * Esto NO reusa la paleta, tipografía, ni escala de wyra-website — es un sistema propio. Lo único
 * compartido con Wyra es la técnica de escribir tokens como custom properties, que es simplemente
 * cómo se escribe CSS mantenible, no una decisión de marca.
 */

:root {
  /* Marca — leída del logo real */
  --hilo-blue:        #2E4D9E;
  --hilo-blue-deep:   #1F3872;
  --hilo-coral:       #F2653C;
  --hilo-coral-deep:  #D9481F;
  --hilo-gradient:    linear-gradient(135deg, var(--hilo-blue) 0%, var(--hilo-coral) 100%);

  /* "by Wyra" — deliberadamente apagado, Wyra queda chico y secundario */
  --hilo-muted-gray:  #8A8A93;
  --hilo-graphite:    #33333A;

  /* Neutros — cálidos, no el off-white con tinte cian de Wyra */
  --hilo-canvas:      #FAFAF8;
  --hilo-surface:     #FFFFFF;
  --hilo-border:      #E7E4DF;
  --hilo-ink:         #201F24;
  --hilo-ink-soft:    #55535C;

  /* Alias semánticos (lo que usa el resto del CSS — nunca los tokens de marca directo) */
  --bg-canvas:        var(--hilo-canvas);
  --bg-surface:        var(--hilo-surface);
  --text-primary:      var(--hilo-ink);
  --text-secondary:    var(--hilo-ink-soft);
  --text-muted:         var(--hilo-muted-gray);
  --border-subtle:     var(--hilo-border);
  --accent-gradient:   var(--hilo-gradient);
  --accent-solid:      var(--hilo-coral);
  /* --text-accent: para TEXTO (links, headings de acento, chips) sobre --bg-canvas/--bg-surface.
     --hilo-blue-deep es un color de fondo/borde seguro en cualquier tema, pero como TEXTO sobre un
     canvas que se oscurece (dark mode) el contraste se rompe (auditoría 6-ago: ~15 selectores en
     6 páginas usaban var(--hilo-blue-deep) directo como color de texto, todos con el mismo bug).
     Este alias existe para que texto de acento SIEMPRE pase por un token que sí tiene contraparte
     dark -- nunca escribir var(--hilo-blue-deep) como color de texto de nuevo. */
  --text-accent:       var(--hilo-blue-deep);
  --accent-gradient-text: var(--accent-gradient);

  /* Tipografía — candidatos leídos del wordmark, a confirmar Fase 0 */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --text-xs:      0.75rem;
  --text-sm:      0.875rem;
  --text-base:    1rem;
  --text-md:      1.125rem;
  --text-lg:      1.375rem;
  --text-xl:      1.75rem;
  --text-2xl:     2.25rem;
  --text-3xl:     3rem;
  --text-display: 4.5rem;

  /* Espaciado — escala t-shirt, deliberadamente distinta de la numérica de Wyra */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Radios y sombras — Hilo es un workspace, los necesita para cards/sidebar/modales */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-full: 999px;
  --shadow-sm: 0 1px 2px rgba(32, 31, 36, 0.06);
  --shadow-md: 0 4px 16px rgba(32, 31, 36, 0.08);
  --shadow-lg: 0 12px 32px rgba(32, 31, 36, 0.12);

  /* Tinte de marca a baja opacidad -- se usa como overlay semitransparente (pills activas, chips,
     glow de foco) sobre CUALQUIER fondo, claro u oscuro, sin necesitar un valor distinto por tema
     (es un color encima de la superficie, no la superficie misma). */
  --accent-tint-bg:     rgba(46, 77, 158, 0.08);
  --accent-tint-border: rgba(46, 77, 158, 0.28);
  --accent-glow-blue:   rgba(46, 77, 158, 0.35);
  --accent-glow-coral:  rgba(242, 101, 60, 0.32);

  --ease-hilo: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-quick: 150ms;
  --duration-medium: 300ms;

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;

  /* Ancho real de contenido -- una sola fuente para app/.panel + project|business|guides|terms|
     privacy|refund-policy/.wrap, que hoy tienen 4 valores distintos (640/720/760px) todos
     angostos para pantalla ancha (6-ago, hallazgo del founder: en desktop el contenido queda
     apretado a un lado con medio monitor vacío, lo que además hace que todo se vea más largo
     verticalmente de lo necesario -- una grilla como la Galería, por ejemplo, entra en menos
     columnas de las que el espacio real permite). 960px es ~30-50% más ancho que cualquiera de
     los 4 valores viejos sin llegar a estirar demasiado una línea de texto/chat. */
  --content-max: 960px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-canvas:     #17161B;
    --bg-surface:    #201F26;
    --text-primary:  #F4F2ED;
    --text-secondary: #C7C4CE;
    --border-subtle: #34323C;
    /* #89A6E8 -- variante clara de --hilo-blue, elegida por contraste real (no a ojo): ≥6.4:1
       WCAG contra los 3 fondos oscuros reales del sitio (--bg-canvas #17161B ≈7.4:1, --bg-surface
       #201F26 ≈6.75:1, --accent-tint-bg compuesto sobre --bg-surface ≈6.4:1) -- muy por encima del
       mínimo AA 4.5:1 en los tres casos. */
    --text-accent: #89A6E8;
    --accent-gradient-text: linear-gradient(135deg, #89A6E8 0%, var(--hilo-coral) 100%);
  }
}

/* El motivo del "hilo": un divisor con el degradé real de la marca, en vez de una línea recta
   plana. Se usa hoy en la landing; el mismo token de gradiente reaparece más adelante como línea
   de progreso y como conector entre unidades de un Proyecto (Fase 5/6) — no se construye esa parte
   todavía, solo se deja el token listo. */
.hilo-thread {
  height: 3px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--accent-gradient);
}

/* Bug real (6-ago): el atributo `hidden` solo funciona vía la regla del user-agent
   `[hidden] { display: none }` -- CUALQUIER regla de autor que fije `display` en ese mismo
   elemento (por #id o .clase, sin importar especificidad) le gana a esa regla del navegador,
   porque author-normal siempre le gana a UA-normal en la cascada, no por especificidad. Encontrado
   en `#gallery-attach-modal` (`display:flex` + `position:fixed` -- por eso el modal se veía SIEMPRE,
   tapando toda la pantalla, y "Cancelar" no hacía nada visible porque igual seguía en display:flex)
   y en `#balanced-mode-row` (mostraba los 3 botones de modo del tier Equilibrado sin que el usuario
   hubiera elegido "Todo en un modo" todavía). Un tercer caso (`#daily-video-image-preview-wrap`)
   nunca se notó porque el contenedor está vacío hasta que se sube una imagen.
   Fix de una sola línea, para todo el sitio, para siempre -- `!important` a propósito: no existe
   un caso legítimo de "oculto pero visible", así que esto restaura la semántica real de `hidden`
   sin tener que perseguir cada regla de display individual (y las que se agreguen después). */
[hidden] {
  display: none !important;
}