/* Siorai Studio tokens. The client's own system from the approved mock,
   extended with a danger token and a formal scale. Single-theme dark by
   intent: this is the brand's boutique dark room. */
:root {
  --bg: #141312;
  --surface: #1c1b1a;
  --surface2: #262421;
  --border: #332f2b;
  --header: #0f0e0e;
  --bone: #f5ede6;
  --text: #c9c1b9;
  --muted: #867e76;
  --faint: #4a453f;
  --acid: #a6ff07;
  --ok: #8fbf7f;
  --warn: #d7a45b;
  --danger: #c96f5f;

  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --font-display: 'Bodoni Moda', Georgia, serif;

  /* type scale */
  --fs-label: 10px;
  --fs-small: 12px;
  --fs-body: 13.5px;
  --fs-lead: 15px;
  --fs-h3: 16px;
  --fs-h2: 19px;
  --fs-h1: 23px;

  /* spacing on a 4px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* shape: outer 10, inner 6, pill */
  --r-outer: 10px;
  --r-inner: 6px;
  --r-pill: 999px;

  /* the workspace rhythm: canvas inset, rail inset, tray tile */
  --ws-x: 32px; --ws-y: 24px; --rail-pad: 20px; --tile-w: 72px;

  --raise: inset 0 1px 0 rgba(245, 237, 230, .04);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; height: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-body);
  line-height: 1.55;
  /* one screen: the document never scrolls; .main is the only scrollport */
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--font-mono); }
.display { font-family: var(--font-display); font-weight: 400; letter-spacing: .01em; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
:focus-visible { outline: 2px solid var(--acid); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* The studios' own accents. The shell stays the same dark room; the mark in
   the lockup and the accent say whose studio it is (2026-09-12). */
body[data-theme="mustard"] { --acid: #CEAA2D; --ok: #A8891F; }
body[data-theme="sportif"] { --acid: #5FB3C9; --ok: #7FB89B; }
body[data-theme="imagineif"] { --acid: #a6ff07; }
.lockup-brand { font-size: 17px; letter-spacing: .08em; color: var(--bone); }
body[data-theme="mustard"] .mark-cl { filter: brightness(0) invert(.93); height: 22px; }