/* ==========================================================================
   Workflow Studio — showreel
   tokens.css
   Palette, type scale and the handful of globals everything else reads.
   ========================================================================== */

:root {
  /* Surfaces — STUDIO_SURFACE_COLOR + TOOL_BACKGROUND_COLOR */
  --surface: rgb(15, 15, 15);
  --surface-raised: rgb(25, 25, 27);
  --card: rgb(34, 36, 41);
  --card-hover: rgb(44, 44, 46);

  /* Borders */
  --border: rgb(50, 50, 52);
  --border-strong: rgb(84, 84, 87);
  --border-selected: rgba(255, 255, 255, 0.22);

  /* Text — LIGHT_TEXT_COLOR / MUTED_TEXT_COLOR / primaryLightColor */
  --text: #e5e5ea;
  --text-muted: #8e8e93;
  --text-dim: #b3b3b3;

  /* Accent — GT core highlightColor / highlightColorLighten / hoverColor */
  --accent: #d8b56f;
  --accent-hover: #e3ca97;
  --accent-soft: rgba(216, 181, 111, 0.14);
  --accent-contrast: rgb(15, 15, 15);

  /* Node connectors — the one place the product is not gold. */
  --port: #ff2d9b;

  /* Workflow status colors */
  --running: #5a9fd4;
  --failed: #c85a5a;
  --completed: #6b9f6b;
  --cancelled: #d4925a;
  --timedout: #e8561e;

  /* Shadows */
  --shadow-default: rgba(0, 0, 0, 0.35);
  --shadow-hover: rgba(0, 0, 0, 0.4);
  --glow: rgba(255, 255, 255, 0.08);

  --radius: 8px;
  --radius-lg: 14px;
  --max-w: 1180px;
  --nav-h: 64px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  /* Desaturated fractal noise, used to dither the gold halos. A gradient
     spanning hundreds of pixels across ~8 levels of an 8-bit channel bands
     into visible steps; a pixel of noise on top scatters the step edges and
     the eye reads a continuous ramp.

     numOctaves is 2, not 4: the extra octaves are low-frequency, and low
     frequency noise reads as blotches sitting *on* the ramp rather than as a
     dither scattering it. */
  --grain: 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' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* The noise is rasterised at CSS resolution and then scaled up by the device
     pixel ratio, so one noise pixel becomes a 2x2 block on a retina screen —
     which is the blockiness, not the gradient. Shrinking the tile in step with
     the ratio keeps a noise pixel at roughly one device pixel. */
  --grain-size: 140px;
}

@media (min-resolution: 1.5dppx) {
  :root {
    --grain-size: 94px;
  }
}

@media (min-resolution: 2.5dppx) {
  :root {
    --grain-size: 56px;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  /* The intro locks scrolling with overflow: hidden. Without a reserved
     gutter, the scrollbar vanishes with it and the whole page shifts sideways
     by its width when it comes back. */
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
}

p {
  margin: 0;
}

.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 24px;
}