/* Estilo común de las páginas web de ARSIM CODE: los mismos colores, radios y superficies que la app de escritorio
   (client/LadderStudio/Palette.axaml, tema oscuro). Cada página enlaza esta hoja y deja en su <style> solo su diseño.
   Si cambia, subir el ?v= de los <link> (el navegador la guarda un día). */
:root{
  --ground:#0F1115; --bar:#0A0D12; --panel:#161A20; --card:#1C2129; --hover:#242B35;
  --border:#2A303A; --border-focus:#373F4D;
  --text:#E6E8EB; --muted:#A9B1BC; --disabled:#5C6573;
  --accent:#9EEB47; --accent-hover:#B2F06B; --on-accent:#0B1E02; --accent-tint:rgba(158,235,71,.12);
  --accent-border:rgba(158,235,71,.30); --accent-border-strong:rgba(158,235,71,.56); --featured-border:#3A5E1E;
  --warn:#F5B942; --err:#F0554D;
  --radius:14px; --radius-lg:16px; --radius-btn:8px; --radius-tag:6px;
  --shadow-card:0 8px 24px rgba(0,0,0,.25); --shadow-hero:0 10px 30px rgba(0,0,0,.35);
  --ui:"Outfit","Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono",Consolas,monospace;
  color-scheme:dark;
}

/* Botón principal: degradé lima con brillo arriba y un halo que crece con el mouse, como en la app */
.btn{
  background:linear-gradient(#AEF064,#92E03E); color:var(--on-accent); border-radius:var(--radius-btn);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 10px rgba(158,235,71,.20);
  transition:box-shadow .18s ease, transform .12s ease, filter .18s ease;
}
.btn:not(:disabled):hover{filter:brightness(1.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 20px rgba(158,235,71,.35)}
.btn:active{transform:translateY(1px)}

/* Superficie de carbono, la de las tarjetas grandes de la app: un halo arriba a la derecha (--glow), un velo que deja la
   textura visible en esa esquina y la apaga hacia el texto, y la fibra de carbono (carbon.png: 16 px dibujados a 8 para
   que quede nítida en pantallas de alta densidad) */
.carbon{
  --glow:transparent;
  background:
    radial-gradient(circle 170px at calc(100% - 40px) 0, var(--glow), transparent),
    linear-gradient(to bottom left, rgba(26,31,39,.06), rgba(22,26,32,.62) 50%, rgba(20,24,30,.88)),
    url(/media/carbon.png?v=1) 0 0 / 8px 8px;
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-hero);
}
.carbon.glow{--glow:rgba(158,235,71,.18)}
.carbon.glow-teal{--glow:rgba(46,211,192,.14)}
.carbon.featured{border-color:var(--featured-border)}

/* Íconos de trazo (los del set de la app, design/icons): el movimiento chico al pasar el mouse lo da cada página */
svg.ic{flex:none; transition:transform .24s cubic-bezier(.33,1,.68,1)}
.btn:hover svg.ic-go, a:hover > svg.ic-go{transform:translateX(3px)}

/* Con «reducir movimiento» del sistema, nada se desliza ni se anima */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{transition-duration:0s !important; animation-duration:0s !important; animation-iteration-count:1 !important; scroll-behavior:auto !important}
}