/* util-lab-b24 — design system compartido.
   Fuente de verdad: el portal (index.html en la raíz). Estos son los átomos
   genuinamente reusables entre herramientas: tokens de color OKLCH, reset,
   grano SVG, monograma de marca, y el pill de toggle de tema. El layout
   propio de cada página (hero, grillas, secciones) queda en el style.css de
   cada herramienta -- no es parte del design system compartido todavía.

   Nota (issue #19): el portal hoy mantiene su propia copia inline de estos
   mismos valores en vez de consumir este archivo, así que hay duplicación
   temporal entre este archivo y el <style> del portal. Se resuelve cuando el
   portal migre a consumir shared/ul.css -- no se tocó el portal acá para no
   arriesgar romperlo fuera del alcance de esta tarea (issue #15). */

:root {
  --c-bg: oklch(7.5% 0.004 252);
  --c-surface: oklch(12% 0.006 252);
  --c-text: oklch(97% 0.002 90);
  --c-body: oklch(74% 0.008 250);
  --c-muted: oklch(60% 0.01 252);
  --c-hair: oklch(23% 0.008 252);
  --c-pill-bg: oklch(100% 0 0 / 0.05);
  --c-accent-text: oklch(76% 0.05 232);
  --c-orb-core: oklch(44% 0.06 236);
  --c-orb-edge: oklch(26% 0.04 236 / 0.75);
  --c-mono-hi: oklch(78% 0.055 232);
  --c-mono-lo: oklch(24% 0.035 242);
  --c-toggle-active: oklch(97% 0.002 90);
  --c-toggle-inactive: oklch(56% 0.01 252);
  --grain-fine-opacity: 0.3;
  --grain-orb-opacity: 0.5;
}

:root[data-theme="light"] {
  --c-bg: oklch(95% 0.003 250);
  --c-surface: oklch(100% 0 0);
  --c-text: oklch(14% 0.006 252);
  --c-body: oklch(34% 0.008 252);
  --c-muted: oklch(46% 0.01 252);
  --c-hair: oklch(86% 0.006 252);
  --c-pill-bg: oklch(100% 0 0 / 0.6);
  --c-accent-text: oklch(48% 0.06 232);
  --c-orb-core: oklch(82% 0.045 236);
  --c-orb-edge: oklch(90% 0.03 236 / 0.5);
  --c-mono-hi: oklch(84% 0.04 232);
  --c-mono-lo: oklch(46% 0.045 240);
  --c-toggle-active: oklch(14% 0.006 252);
  --c-toggle-inactive: oklch(48% 0.01 252);
  --grain-fine-opacity: 0.16;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Grano fino global (mismo mecanismo que el portal: requiere los <filter>
   nCoarse/nFine en un <svg><defs> oculto en el HTML de la página, y este
   <svg class="grain-fine-overlay"> con un <rect filter="url(#nFine)">). */
.grain-fine-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--grain-fine-opacity);
  pointer-events: none;
  z-index: 50;
}

/* Monograma de marca: cuadrado con la esquina inferior-derecha cortada,
   gradiente radial + grano. Mismo patrón que el portal, header (32px) y
   footer (16px). */
.mono {
  position: relative;
  flex: 0 0 auto;
  display: block;
  clip-path: polygon(0 0, 100% 0, 100% 66%, 66% 100%, 0 100%);
  background: radial-gradient(circle at 30% 24%, var(--c-mono-hi), var(--c-mono-lo) 78%);
  overflow: hidden;
}

.mono--header {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}

.mono--footer {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.mono-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.75;
  mix-blend-mode: overlay;
}

/* Pill de toggle de tema (Oscuro/Claro), mismo mecanismo del portal:
   data-theme en <html>, dos botones de texto, el activo resaltado. */
.theme-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--c-hair);
  background: var(--c-pill-bg);
  border-radius: 999px;
  padding: 8px 16px;
}

.theme-pill button {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  letter-spacing: 0.01em;
  cursor: pointer;
  color: var(--c-toggle-inactive);
}

.theme-pill button.is-active {
  color: var(--c-toggle-active);
  font-weight: 600;
}
