/* COPIA de zenith/zenith.css (node zenith/sync.js). No editar aca. */
/* =========================================================================
   Zenith — el sistema de diseño de Northlane Studio
   -------------------------------------------------------------------------
   Lo que comparten TODAS las apps de la familia (Solaris es la primera).
   Cada app pone su glifo y lo suyo; esto no se toca por app.

   Todo va con prefijo --zn- para no chocar con las variables propias de
   cada app. Una app lo carga ANTES de su propio CSS y mapea sus variables
   a estas (ver Solaris: src/renderer/styles/base.css).

   Fuente de verdad: zenith/ en la raiz del repo. Las apps reciben una copia
   con `node zenith/sync.js` (no editar las copias).
   ========================================================================= */

:root {
  /* --- color: grafito ---------------------------------------------------- */
  --zn-ink-0: #0a0a0a;   /* lo mas profundo: placa del icono, fondo de fondo */
  --zn-ink-1: #131313;   /* fondo de la app */
  --zn-ink-2: #1c1c1c;   /* superficies */
  --zn-ink-3: #262626;   /* superficie elevada / hover */
  --zn-t1: #f2f2f2;      /* texto */
  --zn-t2: #ababab;      /* texto secundario */
  --zn-t3: #6f6f6f;      /* metadatos */
  --zn-silver: linear-gradient(200deg, #ffffff, #d9d9d9 45%, #8a8a8a);

  /* --- el sol --------------------------------------------------------------
     La firma de la familia. Un punto calido que marca "esto esta vivo /
     esto es lo importante ahora": lo que suena, lo que carga, lo que se
     eligio. Es el UNICO color calido de la interfaz: si aparece en todos
     lados deja de significar algo. */
  --zn-sun: #ffd9a8;
  --zn-sun-core: #fff4e0;
  --zn-sun-glow: rgba(255, 226, 184, 0.55);

  /* --- lo de ahora -----------------------------------------------------------
     (2026-10-14) Los INDICADORES (lo que suena, la linea de progreso, lo
     elegido, las tildes) van en blanco, como el resto de la interfaz: el sol
     queda solo para el sol (el logo, el cielo, el punto de la firma). Sigue
     al texto, asi que en un tema claro es oscuro. */
  --zn-live: var(--zn-t1);
  --zn-live-glow: color-mix(in srgb, var(--zn-t1) 35%, transparent);

  /* --- el cielo: tinte segun la hora (lo pone zenith.js) -------------------
     Amanecer calido, mediodia neutro, atardecer ambar, noche profunda.
     Es un velo MUY tenue sobre el fondo: se siente, no se ve. */
  --zn-sky: transparent;
  --zn-sky-strength: 1;

  /* --- tipografia ---------------------------------------------------------- */
  --zn-font: 'Geist', 'Inter', 'Segoe UI Variable', system-ui, sans-serif;
  --zn-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --zn-fs-xs: 10px;
  --zn-fs-sm: 11px;
  --zn-fs-base: 12px;
  --zn-fs-md: 13px;
  --zn-fs-lg: 15px;
  --zn-fs-xl: 20px;
  --zn-fs-2xl: 28px;
  --zn-track-title: -0.03em;  /* titulos grandes, apretados */
  --zn-track-label: 0.08em;   /* etiquetas en mono mayuscula */

  /* --- forma --------------------------------------------------------------- */
  --zn-radius-sm: 4px;
  --zn-radius: 8px;
  --zn-radius-lg: 14px;
  --zn-radius-xl: 24px;
  --zn-radius-icon: 22.2%;    /* esquina de la placa del icono (14.2/64) */

  /* --- profundidad ----------------------------------------------------------- */
  --zn-shadow-1: 0 4px 14px rgba(0, 0, 0, 0.4);
  --zn-shadow-2: 0 14px 36px rgba(0, 0, 0, 0.42);
  --zn-shadow-3: 0 24px 70px rgba(0, 0, 0, 0.55);

  /* --- grilla de ingenieria ------------------------------------------------- */
  --zn-grid: 64px;
  --zn-grid-line: rgba(255, 255, 255, 0.035);

  /* --- movimiento ------------------------------------------------------------ */
  --zn-ease: cubic-bezier(0.22, 0.9, 0.24, 1);
  --zn-ease-in-out: cubic-bezier(0.6, 0.02, 0.24, 1);
  --zn-ease-spring: cubic-bezier(0.34, 1.4, 0.5, 1);
  --zn-dur-1: 0.12s;
  --zn-dur-2: 0.2s;
  --zn-dur-3: 0.34s;
  --zn-dur-4: 0.56s;
}

/* En un tema claro el sol se dora: el melocoton palido no se ve sobre blanco.
   La app pone data-zn-scheme="light" en <html> cuando su tema es claro. */
html[data-zn-scheme='light'] {
  --zn-sun: #f2a33a;
  --zn-sun-core: #ffd27a;
  --zn-sun-glow: rgba(242, 163, 58, 0.45);
  --zn-live: #1a1a1a;
  --zn-live-glow: rgba(0, 0, 0, 0.18);
}

/* El cielo por hora. zenith.js pone data-zn-time en <html>; el cambio entre
   franjas es una transicion lenta de color, nunca un salto. */
html[data-zn-time='dawn'] { --zn-sky: rgba(255, 170, 120, 0.07); }
html[data-zn-time='day'] { --zn-sky: rgba(255, 255, 255, 0.015); }
html[data-zn-time='dusk'] { --zn-sky: rgba(255, 150, 70, 0.075); }
html[data-zn-time='night'] { --zn-sky: rgba(70, 90, 170, 0.08); }

/* --- piezas de la familia ------------------------------------------------- */

/* El sol como indicador: un punto calido con halo. Cualquier app lo usa para
   "esto es lo de ahora". */
.zn-sun {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, var(--zn-sun-core), var(--zn-sun));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--zn-sun) 18%, transparent),
    0 0 10px var(--zn-sun-glow);
  flex: none;
}

/* El velo del cielo: una capa fija detras de todo. Se pinta una vez y solo
   cambia de color cada tanto (transicion de 4 s), asi que no cuesta nada. */
.zn-sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% -10%, var(--zn-sky), transparent 70%);
  opacity: var(--zn-sky-strength);
  transition: background 4s linear;
}

/* Etiqueta en mono mayuscula, la "voz tecnica" de la familia. */
.zn-label {
  font-family: var(--zn-mono);
  font-size: var(--zn-fs-xs);
  letter-spacing: var(--zn-track-label);
  text-transform: uppercase;
  color: var(--zn-t3);
}