/* ===========================================================================
   Laser Show Studio — design tokens
   Shared by the studio, the landing page, account and admin.

   Direction: an optical bench, not a nightclub.

   The interface is dark for one honest reason — you are judging emitted light,
   the same reason oscilloscopes and colour-grading suites are dark. But the
   chrome deliberately holds NO saturated colour. Warm graphite and brass only.
   Every vivid colour on screen belongs to the laser artwork itself, so when
   magenta appears in the canvas it reads as output rather than decoration.
   Resist adding accent colour to panels; it steals from the beam.
   =========================================================================== */

@font-face {
  font-family: 'Instrument Sans';
  src: url('/fonts/instrument-sans-var-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Surfaces -----------------------------------------------------------
     Warm near-black tinted toward amber, never blue-black and never #000.
     The steps are close together on purpose: depth comes from hairlines,
     not from drop shadows. */
  --bench-void: oklch(0.145 0.006 65);   /* behind everything */
  --bench-base: oklch(0.178 0.007 65);   /* app background */
  --bench-panel: oklch(0.212 0.008 65);  /* control surfaces */
  --bench-raised: oklch(0.248 0.009 68); /* inputs, pressed states */
  --bench-stage: oklch(0.128 0.006 65);  /* the preview well — darkest */

  /* --- Lines --------------------------------------------------------------
     Hairlines do the structural work that borders and shadows usually do. */
  --rule: oklch(0.30 0.008 68);
  --rule-soft: oklch(0.255 0.007 68);
  --rule-bright: oklch(0.40 0.012 70);

  /* --- Type ---------------------------------------------------------------
     Warm ivory rather than white; muted tones stay in the same hue family so
     nothing looks washed out against the warm surfaces. */
  --ink: oklch(0.94 0.008 80);
  --ink-muted: oklch(0.72 0.010 78);
  --ink-faint: oklch(0.575 0.010 75);
  --ink-inverse: oklch(0.16 0.006 65);

  /* --- Brass ---------------------------------------------------------------
     The single interface accent: instrument-panel brass. Used for focus,
     active controls and the meter needle. Deliberately desaturated so it
     never competes with the beam. */
  --brass: oklch(0.76 0.105 78);
  --brass-dim: oklch(0.62 0.085 78);
  --brass-wash: oklch(0.76 0.105 78 / 0.14);

  /* --- Signal -------------------------------------------------------------
     Status only, kept muted for the same reason. */
  --signal-ok: oklch(0.74 0.11 150);
  --signal-warn: oklch(0.78 0.12 75);
  --signal-hot: oklch(0.66 0.19 25);

  /* --- Laser --------------------------------------------------------------
     Artwork colours. These are the ONLY vivid values in the system and they
     belong on the canvas. --laser-default seeds a new project's dot colour. */
  --laser-default: #ff2b6d;
  --laser-alt: #2bff88;

  /* --- Type scale ---------------------------------------------------------
     Fluid, tightly ranged: this is a control panel, not a landing page. */
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-ui: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;

  --text-micro: 0.6875rem;                            /* 11px — control labels */
  --text-small: 0.78125rem;                           /* 12.5px */
  --text-body: 0.875rem;                              /* 14px */
  --text-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-title: clamp(1.35rem, 1.15rem + 0.9vw, 2rem);
  --text-display: clamp(2.25rem, 1.6rem + 3.2vw, 4.5rem);

  /* --- Space --------------------------------------------------------------
     A deliberately uneven ramp. Tight values group related controls; the
     large ones separate whole regions. Even spacing everywhere is what makes
     an interface feel machine-generated. */
  --space-hair: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.4375rem;
  --space-sm: 0.6875rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.25rem;
  --space-2xl: 3.5rem;

  /* --- Geometry -----------------------------------------------------------
     Machined, not pill-shaped. Nothing here is rounder than 4px. */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;

  /* --- Motion -------------------------------------------------------------
     Exponential deceleration only. No bounce, no elastic. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --dur-fast: 110ms;
  --dur-mid: 220ms;
  --dur-slow: 420ms;
}

/* Honour the OS setting rather than assuming the viewer wants motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-mid: 0ms;
    --dur-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Reset ---------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bench-base);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

canvas {
  display: block;
}

/* One focus treatment everywhere, and only for keyboard users. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* Numbers that change in place must not reflow their neighbours. */
.tabular {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Small caps label treatment used across control panels. */
.label-micro {
  font-size: var(--text-micro);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}