:root {
  color-scheme: dark;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --app-height: 100dvh;
  --viewport-offset-top: 0px;
  --viewport-offset-bottom: 0px;
  /* §22.6xx.658dr.22 — El logo sigue al accent a propósito (Roberto, 29 sep
     2026): si el accent cambia, cambia el color del logo. Antes eran dos
     colores distintos (#FE5B44 branding + #c85a29 UI) y esa duplicación
     derivó: un commit "WIP" colapsó el token al coral sin actualizar los 19
     tintes rgba() que se derivaban de él (§22.6xx.658dr.21). Un solo token y alias
     resuelve la causa en vez de parchar los síntomas. */
  --logo-accent: var(--brass);
  --logo-accent-strong: color-mix(in srgb, var(--brass) 85%, black);
  --logo-accent-soft: color-mix(in srgb, var(--brass) 16%, transparent);

  --robin: #c85a29;
  --brass: #c85a29;
  /* §22.6xx.wcag-aa — text-safe coral para fondos claros (AA ≥4.5:1).
     5.65:1 sobre panel-cream, 5.76:1 sobre parchment, 5.30:1 sobre panel-birch.
     Mismo hue que --brass (H≈17°) pero L=39% para pasar WCAG AA en texto pequeño.
     Usar SOLO como `color:` (texto). Para backgrounds/borders seguir con --brass. */
  --brass-text: #93411c;
  --brass-light: #e5a085;
  --brass-dark: #93411c;
  --brass-gold: #C5A059;
  --brass-gold-light: #E5C481;
  --brass-gold-dark: #8E7236;
  --parchment: #FBF5EB;
  --sepia: #5C4033;
  --sepia-soft: #8B6F4E;
  /* §22.6xx.wcag-aa — text-safe sepia-soft para fondos claros (AA ≥4.5:1).
     5.46:1 sobre panel-cream, 5.94:1 sobre parchment. Usar SOLO como `color:`. */
  --sepia-soft-text: #6B4D33;
  --desk-oak: #B59573;
  --ink-stroke:#D5B88F;
  --panel-cream: #f7e6c0;
  --panel-birch: #F4EBE1;
  /* §22.6xx.658 — Color del ring interior del filter thick-torn-edge.
     Sienna tostado cálido, aplicado al feFlood del filter SVG #thick-torn-edge
     via <style> dentro del SVG (los atributos SVG no aceptan var() directamente). */
  --rp-ring-color: #A5663A;
  --rp-ring-opacity: 0.20;
  /* §22.6xx.unify-ui-textures — UI-texture única compartida.
   * Una sola imagen 1500×1500 (interface-texture.webp) cubre tanto
   * headers horizontales como sidebars/toolbars verticales: con
   * `background-size: cover` el browser cropea al ratio del contenedor
   * manteniendo la coherencia visual (mismo material en ambos contextos).
   * §22.310 + §22.316 + §22.313 — antes había 2 vars separadas
   * (--ui-texture-top-bar + --ui-texture-toolbar-vertical) apuntando a
   * 2 imágenes distintas (1499×149 y 149×1499). Se consolida en 1. */
  --ui-texture-interface: url(../resources/ui-textures/interface-texture.webp);
  --ui-texture-pad-covers: url(../resources/ui-textures/pad-covers.webp);
  /* §22.6xx.656bl iter 4 — Paper noise PNG. SVG con feTurbulence+feColorMatrix
     daba problemas de rendering en algunos browsers (filtros no se aplicaban
     consistentemente como background-image). Cambio a PNG generado con
     Python/PIL: noise random 480x480 + GaussianBlur radius 2.5 + threshold
     para crear motas sepia con alpha variable (0-129). 240x240 tileable
     (tomando el centro del noise 2x). Grano grande, visible. */
  --ui-texture-paper-noise: url(../resources/ui-textures/paper-noise.png);
  --btn-bg: #5C3317;
  --btn-bg-hover: #6B3E20;
  /* §22.6xx.656bd — Raised shadow: marrón cálido casi idéntico al
     color del botón (--btn-bg). Iter 1: #4b2b15 (muy oscuro).
     Iter 2: #5A2D14 (más cercano, pero Roberto: "se sigue viendo
     muy negro"). Iter 3: #5B3015 — RGB 91, 48, 21, solo -1 en R
     y -3 en G respecto al botón. Prácticamente el mismo color con
     un tono mínimamente más oscuro. La sombra raised se ve como
     "extensión del color del botón" en vez de "bloque negro
     debajo del botón". El danger override (chrome.css:4445)
     mantiene #5A1D11 para los botones rojos de peligro. */
  --btn-bg-raised: #5B3015;
  --ivory: #FFFDF8;
  --desk-shadow: rgba(80, 40, 15, 0.25);
  --desk-shadow-deep: rgba(60, 30, 10, 0.45);

  /* §22.6xx.658dr.131 — Barra de scroll UNICA de la app.
     Track invisible, thumb con opacidad baja para que se lea el contenido que
     tiene detrás. §658dr.132: Roberto pidió tintarla al color de acento ("¿se
     podría tintar esa barra de scroll al color de acento, y que mantenga la
     opacidad?") conservando la translucidez. Se deriva de `var(--brass)` con
     `color-mix`, el mismo patrón que el resto del workspace (tokens.css:17-18,
     chrome.css:565 y 1892, que usan justo estos porcentajes): el accent se
     cambia en un sitio y la barra lo sigue, en vez de llevar un hex coral
     suelto que se puede desincronizar como ya pasó con el rojo del logo. */
  --scrollbar-size: 8px;
  --scrollbar-radius: 4px;
  --scrollbar-thumb: color-mix(in srgb, var(--brass) 38%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--brass) 58%, transparent);
  --scrollbar-track: transparent;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overscroll-behavior: none;
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--brass) 14%, transparent), transparent 30%),
    #101317;
  /* §22.6xx.521g — Plus Jakarta Sans como body font del workspace. Sans-serif
     geométrica con formas ligeramente humanistas (terminales suaves en a/g,
     contraste medio), 'friendly' y 'calmada' sin ser técnica como Source
     Code Pro. Encaja con el aire operativo (sliders, hex codes, atajos) del
     workspace. Cherry Swash se preserva para brand; Source Code Pro para
     .font-mono puntuales. Fallback chain: si Google Fonts no carga, system-ui
     y -apple-system asumen el rol (BlinkMacSystemFont en Chrome/Safari macOS,
     Segoe UI en Windows, Roboto en Android). */
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* §22.6xx.545 — Medium 500 (más cuerpo que Regular 400 sin caer en Bold).
     Mejora la legibilidad de textos cortos (sliders, hex codes, labels) sin
     comprometer la fluidez de párrafos largos. El weight 500 ya está en el
     @font-face local (§22.6xx.542), así que no hay que descargar nada. */
  font-weight: 500;
}

body {
  padding: 0;
  min-height: var(--app-height);
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: var(--app-cursor, auto);
}