/* =========================================================
   AISIN STUDIO · TOKENS Y BASE (colores, tipografía, tamaños, reset)
========================================================= */

:root{
  /* color */
  --black:#000;
  --surface-1:#0a0a0a;          /* inputs, panels, controls */
  --surface-2:#141414;          /* popovers, hover fills */
  --line-soft:#1c1c1c;          /* dividers inside panels */
  --line:#2a2a2a;               /* default component border */
  --line-strong:#454545;        /* hover border (neutral) */
  --red:#e02424;
  --red-line:#5a1717;           /* red-tinted border at rest */
  --red-tint:rgba(224,36,36,.10);
  --text:#f5f5f5;
  --text-2:#c2c2c2;
  --muted:#8a8a8a;
  --danger:#ff5c5c;             /* error copy: brand red lifted for small-text contrast */
  --pure:#ffffff; --desire:#f5c518; --forbidden:#e02424;
  --complete:#9333ea;           /* set 3/3: morado, distinto del rojo y del amarillo; texto blanco con buen contraste */

  /* type */
  --f-display:'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --f-cond:'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ls-ui:.06em;                /* condensed caps: buttons, nav, menus */
  --ls-label:.12em;             /* small field labels */

  /* size */
  --h-xs:28px; --h-sm:32px; --h-md:40px; --h-lg:48px;
  --r-sm:2px; --r:4px; --r-lg:6px;
  --icon:20px;
  --gap:16px;
  --pad-x:64px;

  --shadow-pop:0 16px 40px rgba(0,0,0,.6);
  --sidebar:0px;

  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --black:#000; --text:#f5f5f5; } }
:root[data-theme="dark"]{ --black:#000; --text:#f5f5f5; }
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--black);color:var(--text);font:400 15px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
svg{display:block}
[hidden]{display:none!important}   /* components that set display must still honour the hidden attribute */