/**
 * THE APP MACHINE — design tokens.
 * Material values come from real glass-front merchandiser references:
 * graphite powder-coat body, brushed stainless extrusions, 5500K interior LEDs,
 * float-glass green on the pane's cut edge.
 */

:root {
  color-scheme: dark;

  /* ---- Environment ---------------------------------------------------- */
  --room-bg: #0a0b0d;
  --room-wall: #131417;
  --room-floor: #08090a;

  /* ---- Machine body: near-black matte powder-coat ----------------------
     Reference reads far darker than typical graphite — the body is almost
     black and almost specular-free, so the lit interior carries all contrast. */
  --metal-dark: #0f1113;
  --metal-body: #17191b;
  --metal-mid: #212427;
  --metal-light: #2f3336;
  --metal-edge-hi: rgba(255, 255, 255, 0.16);
  --metal-edge-lo: rgba(0, 0, 0, 0.7);
  --seam: rgba(0, 0, 0, 0.72);

  /* ---- Brushed stainless: extrusions, rails, trim --------------------- */
  --steel-dark: #6f7478;
  --steel-mid: #8e9296;
  --steel-light: #b4b8bb;

  /* ---- Cabinet interior ----------------------------------------------- */
  --cabinet-back: #16191c;
  --cabinet-back-lit: #232729;
  --led-warm: 255, 247, 225;
  --led-cool: 235, 246, 255;
  --shelf-metal: #4c5257;
  --shelf-lip: #eef4f7;

  /* ---- Glass ----------------------------------------------------------- */
  --glass-green: rgba(96, 150, 140, 0.22);
  --glass-rim: rgba(255, 255, 255, 0.3);
  --glass-occlusion: rgba(10, 20, 26, 0.35);

  /* ---- Display (VFD / dot-matrix) -------------------------------------- */
  --display-bg: #07100c;
  --display-ink: #7dffb2;
  --display-dim: rgba(125, 255, 178, 0.34);
  --display-glow: rgba(125, 255, 178, 0.45);
  --display-amber: #ffb454;

  /* ---- Labels & status -------------------------------------------------- */
  --label-card: #e8e6e0;
  --label-ink: #16181b;
  --status-live: #56d98a;
  --status-client: #63a9ff;
  --status-flagship: #ffc453;

  /* ---- Type ------------------------------------------------------------- */
  --font-marque: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --font-ui: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Machine geometry (proportions from real merchandisers) ---------- */
  --marque-h: 11%;      /* real: 8-14% of machine height */
  --base-h: 7.5%;       /* reference runs glass nearly to the floor: plinth + vents only */
  --bezel-side: 1.6%;   /* real: 4-6% of width, split per side */
  --control-w: 15.5%;   /* real: right column ~15% of face width */
  --radius-body: 14px;
  --radius-inner: 6px;

  /* ---- Motion: motorised hardware, zero overshoot ----------------------- */
  --ease-drawer-out: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-drawer-in: cubic-bezier(0.5, 0, 0.2, 1);
  --ease-drop: cubic-bezier(0.55, 0.06, 0.9, 0.34);
  --ease-press: cubic-bezier(0.3, 0, 0.1, 1);
  --ease-release: cubic-bezier(0.2, 0.9, 0.3, 1);
  --dur-press: 70ms;
  --dur-release: 160ms;
  --dur-drawer: 520ms;
}

/* Stretched-along-the-brush-axis noise. Baked as a data URI — applying
   filter:url() live to DOM forces software raster on many mobile GPUs. */
:root {
  --grain-metal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.02' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* Pointer-driven light position. Registered so they interpolate off the
   style-recalc slow path. */
@property --mx {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --my {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 28%;
}

@property --px {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --py {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}