/* ============================================
   STUDIO X37 — SPACING, RADII, BORDERS, SHADOW, MOTION
   Hard edges. Hairline seams. Phosphor glow.
   ============================================ */

:root {
  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 144px;

  /* ---- Radii: industrial, near-square ---- */
  --radius-none: 0px;     /* default — panels, cards, media */
  --radius-sm: 2px;       /* buttons, inputs, keys */
  --radius-md: 4px;       /* small chips on raised modules */
  --radius-pill: 999px;   /* tags, status lamps only */
  --radius-crt: 14px;     /* CRT screen corners (media frames) */

  /* ---- Borders ---- */
  --border-hairline: 1px solid var(--border-line);
  --border-interactive: 1px solid var(--border-strong);
  --border-accent-line: 1px solid var(--x37-acid);

  /* ---- Shadows: glow, not drop ---- */
  --glow-acid: 0 0 0 1px rgba(99, 217, 143, 0.35), 0 0 24px rgba(99, 217, 143, 0.18);
  --glow-magenta: 0 0 0 1px rgba(255, 46, 126, 0.4), 0 0 24px rgba(255, 46, 126, 0.22);
  --glow-bone: 0 0 16px rgba(232, 223, 206, 0.12);
  --shadow-module: 0 1px 0 rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(232, 223, 206, 0.05);
  --shadow-deep: 0 24px 64px rgba(0, 0, 0, 0.55);
  --inset-well: inset 0 2px 6px rgba(0, 0, 0, 0.65); /* screen wells, inputs */

  /* ---- Motion ---- */
  --ease-snap: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ /* hardware switch snap */
  --ease-drift: cubic-bezier(0.33, 0, 0.2, 1); /* @kind other */ /* slow ambient drift */
  --dur-snap: 120ms; /* @kind other */
  --dur-fade: 320ms; /* @kind other */
  --dur-drift: 1200ms; /* @kind other */

  /* ---- Z / layout ---- */
  --content-max: 1200px;
  --gutter: var(--space-6);
}

/* ---- Brand texture utilities ---- */
.x37-scanlines {
  position: relative;
}
.x37-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
}

.x37-corner-ticks {
  position: relative;
}
.x37-corner-ticks::before,
.x37-corner-ticks::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  pointer-events: none;
}
.x37-corner-ticks::before {
  top: -1px;
  left: -1px;
  border-top: 1px solid var(--x37-bone);
  border-left: 1px solid var(--x37-bone);
}
.x37-corner-ticks::after {
  bottom: -1px;
  right: -1px;
  border-bottom: 1px solid var(--x37-bone);
  border-right: 1px solid var(--x37-bone);
}