/*
 * VOIDCUT — VD0 Visual Infrastructure
 * CUTFORM design system foundation
 * Phase: VD0
 * Scope: tokens, themes, typography, surfaces, texture, motion, icon primitives.
 * Gameplay/rendering ownership remains untouched until VD1.
 */

:root {
  color-scheme: light;

  /* Space — strict 4px base rhythm */
  --vc-space-1: 4px;
  --vc-space-2: 8px;
  --vc-space-3: 12px;
  --vc-space-4: 16px;
  --vc-space-5: 24px;
  --vc-space-6: 32px;
  --vc-space-7: 48px;
  --vc-space-8: 64px;
  --vc-space-9: 96px;

  /* Geometry */
  --vc-radius-0: 0px;
  --vc-radius-1: 2px;
  --vc-radius-2: 6px;
  --vc-line-1: 1px;
  --vc-line-2: 2px;
  --vc-line-4: 4px;

  /* Type */
  --vc-font-sans: Inter, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vc-font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --vc-weight-regular: 400;
  --vc-weight-medium: 500;
  --vc-weight-semibold: 600;
  --vc-weight-bold: 700;
  --vc-leading-tight: 0.95;
  --vc-leading-heading: 1.05;
  --vc-leading-body: 1.45;
  --vc-track-display: -0.045em;
  --vc-track-heading: -0.025em;
  --vc-track-body: -0.008em;

  --vc-type-hero: clamp(52px, 8vw, 88px);
  --vc-type-display: clamp(40px, 5.5vw, 64px);
  --vc-type-h1: clamp(32px, 4vw, 44px);
  --vc-type-h2: clamp(24px, 3vw, 32px);
  --vc-type-h3: clamp(18px, 2.2vw, 22px);
  --vc-type-body-lg: clamp(17px, 1.5vw, 18px);
  --vc-type-body: clamp(15px, 1.3vw, 16px);
  --vc-type-small: clamp(13px, 1.1vw, 14px);
  --vc-type-meta: clamp(11px, 1vw, 12px);

  /* Motion */
  --vc-duration-press: 100ms;
  --vc-duration-nav: 190ms;
  --vc-duration-reveal: 230ms;
  --vc-duration-physical: 320ms;
  --vc-duration-milestone: 760ms;
  --vc-ease-ui: cubic-bezier(.2,.8,.2,1);
  --vc-ease-physical: cubic-bezier(.2,.7,.1,1);
  --vc-ease-snap: cubic-bezier(.1,.9,.2,1);

  /* Physical elevation: deliberate, not glassmorphic */
  --vc-shadow-contact: 0 2px 0 color-mix(in srgb, var(--vc-shadow) 22%, transparent);
  --vc-shadow-object: 0 5px 12px color-mix(in srgb, var(--vc-shadow) 18%, transparent);
  --vc-shadow-overlay: 0 10px 28px color-mix(in srgb, var(--vc-shadow) 22%, transparent);

  /* Static seeded texture. Never animate this asset. */
  --vc-grain-opacity: .035;
  --vc-grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.62'/%3E%3C/svg%3E");

  /* Paper is canonical and doubles as safe fallback */
  --vc-bg: #E9E4D8;
  --vc-bg-alt: #DDD7C9;
  --vc-surface: #F7F3E8;
  --vc-surface-raised: #FFFCF3;
  --vc-bg-ink: #171714;
  --vc-bg-ink-muted: #66625A;
  --vc-ink: #171714;
  --vc-ink-secondary: #5F5C54;
  --vc-ink-muted: #726E66;
  --vc-line: #B7B0A2;
  --vc-line-strong: #171714;
  --vc-accent: #EF593D;
  --vc-accent-alt: #2253C7;
  --vc-arena: #F8F4E9;
  --vc-arena-edge: #171714;
  --vc-substrate: #181816;
  --vc-node-a: #171714;
  --vc-node-b: #2253C7;
  --vc-node-c: #EF593D;
  --vc-danger: #CC3932;
  --vc-success: #26754C;
  --vc-shadow: #171714;
  --vc-on-accent: #171714;
  --vc-on-substrate: #F7F3E8;
  --vc-focus: #2253C7;
  --vc-danger-pattern: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--vc-danger) 42%, transparent) 6px 9px);
  --vc-success-pattern: repeating-linear-gradient(90deg, transparent 0 7px, color-mix(in srgb, var(--vc-success) 34%, transparent) 7px 9px);
}

html[data-vc-theme="paper"] {
  color-scheme: light;
  --vc-bg: #E9E4D8;
  --vc-bg-alt: #DDD7C9;
  --vc-surface: #F7F3E8;
  --vc-surface-raised: #FFFCF3;
  --vc-bg-ink: #171714;
  --vc-bg-ink-muted: #66625A;
  --vc-ink: #171714;
  --vc-ink-secondary: #5F5C54;
  --vc-ink-muted: #726E66;
  --vc-line: #B7B0A2;
  --vc-line-strong: #171714;
  --vc-accent: #EF593D;
  --vc-accent-alt: #2253C7;
  --vc-arena: #F8F4E9;
  --vc-arena-edge: #171714;
  --vc-substrate: #181816;
  --vc-node-a: #171714;
  --vc-node-b: #2253C7;
  --vc-node-c: #EF593D;
  --vc-danger: #CC3932;
  --vc-success: #26754C;
  --vc-shadow: #171714;
  --vc-on-accent: #171714;
  --vc-on-substrate: #F7F3E8;
  --vc-focus: #2253C7;
}

html[data-vc-theme="carbon"] {
  color-scheme: dark;
  --vc-bg: #11110F;
  --vc-bg-alt: #171713;
  --vc-surface: #1D1D19;
  --vc-surface-raised: #272620;
  --vc-bg-ink: #F1EADB;
  --vc-bg-ink-muted: #AAA397;
  --vc-ink: #F1EADB;
  --vc-ink-secondary: #B9B1A4;
  --vc-ink-muted: #8D877D;
  --vc-line: #4A4740;
  --vc-line-strong: #F1EADB;
  --vc-accent: #F3C444;
  --vc-accent-alt: #D75A44;
  --vc-arena: #282723;
  --vc-arena-edge: #F1EADB;
  --vc-substrate: #ECE4D4;
  --vc-node-a: #F1EADB;
  --vc-node-b: #F3C444;
  --vc-node-c: #D75A44;
  --vc-danger: #F05A50;
  --vc-success: #69AD76;
  --vc-shadow: #000000;
  --vc-on-accent: #171713;
  --vc-on-substrate: #171713;
  --vc-focus: #F3C444;
  --vc-grain-opacity: .026;
}

html[data-vc-theme="cobalt"] {
  color-scheme: light;
  --vc-bg: #17399B;
  --vc-bg-alt: #102F87;
  --vc-surface: #EFEBDF;
  --vc-surface-raised: #FAF7EE;
  --vc-bg-ink: #F6F1E6;
  --vc-bg-ink-muted: #D8D2C6;
  --vc-ink: #151514;
  --vc-ink-secondary: #5A5852;
  --vc-ink-muted: #6D695F;
  --vc-line: #B7B1A5;
  --vc-line-strong: #151514;
  --vc-accent: #F5C638;
  --vc-accent-alt: #E84B40;
  --vc-arena: #F3EFE5;
  --vc-arena-edge: #151514;
  --vc-substrate: #17399B;
  --vc-node-a: #151514;
  --vc-node-b: #E84B40;
  --vc-node-c: #F5C638;
  --vc-danger: #C93335;
  --vc-success: #197451;
  --vc-shadow: #071C58;
  --vc-on-accent: #151514;
  --vc-on-substrate: #F6F1E6;
  --vc-focus: #F5C638;
}

html[data-vc-theme="kelp"] {
  color-scheme: light;
  --vc-bg: #183B32;
  --vc-bg-alt: #102F28;
  --vc-surface: #E8DFC7;
  --vc-surface-raised: #F2EAD3;
  --vc-bg-ink: #F0E8D2;
  --vc-bg-ink-muted: #CBC7AF;
  --vc-ink: #15211C;
  --vc-ink-secondary: #56645B;
  --vc-ink-muted: #5B655D;
  --vc-line: #AAA891;
  --vc-line-strong: #15211C;
  --vc-accent: #E9784F;
  --vc-accent-alt: #A5C649;
  --vc-arena: #E8DFC7;
  --vc-arena-edge: #15211C;
  --vc-substrate: #183B32;
  --vc-node-a: #15211C;
  --vc-node-b: #E9784F;
  --vc-node-c: #A5C649;
  --vc-danger: #C84438;
  --vc-success: #39875A;
  --vc-shadow: #071D17;
  --vc-on-accent: #15211C;
  --vc-on-substrate: #F0E8D2;
  --vc-focus: #E9784F;
}

html[data-vc-theme="plum"] {
  color-scheme: light;
  --vc-bg: #3A183C;
  --vc-bg-alt: #2E102F;
  --vc-surface: #F0D7D2;
  --vc-surface-raised: #F8E5E1;
  --vc-bg-ink: #F8E5E1;
  --vc-bg-ink-muted: #D8BCBC;
  --vc-ink: #241620;
  --vc-ink-secondary: #695269;
  --vc-ink-muted: #71576B;
  --vc-line: #C3AAA9;
  --vc-line-strong: #241620;
  --vc-accent: #E34B61;
  --vc-accent-alt: #EFA43A;
  --vc-arena: #F0D7D2;
  --vc-arena-edge: #241620;
  --vc-substrate: #3A183C;
  --vc-node-a: #241620;
  --vc-node-b: #E34B61;
  --vc-node-c: #EFA43A;
  --vc-danger: #C92F43;
  --vc-success: #34795A;
  --vc-shadow: #1C071D;
  --vc-on-accent: #23151F;
  --vc-on-substrate: #F8E5E1;
  --vc-focus: #EFA43A;
}

html[data-vc-theme="mono"] {
  color-scheme: light;
  --vc-bg: #F2F2ED;
  --vc-bg-alt: #E2E2DC;
  --vc-surface: #FFFFFF;
  --vc-surface-raised: #FFFFFF;
  --vc-bg-ink: #111111;
  --vc-bg-ink-muted: #565656;
  --vc-ink: #111111;
  --vc-ink-secondary: #4D4D4D;
  --vc-ink-muted: #6A6A6A;
  --vc-line: #B6B6B0;
  --vc-line-strong: #111111;
  --vc-accent: #111111;
  --vc-accent-alt: #737373;
  --vc-arena: #FFFFFF;
  --vc-arena-edge: #111111;
  --vc-substrate: #111111;
  --vc-node-a: #111111;
  --vc-node-b: #FFFFFF;
  --vc-node-c: #737373;
  --vc-danger: #111111;
  --vc-success: #111111;
  --vc-shadow: #111111;
  --vc-on-accent: #FFFFFF;
  --vc-on-substrate: #FFFFFF;
  --vc-focus: #111111;
  --vc-danger-pattern: repeating-linear-gradient(135deg, transparent 0 5px, #111 5px 8px);
  --vc-success-pattern: repeating-linear-gradient(90deg, transparent 0 7px, #111 7px 9px);
  --vc-grain-opacity: .018;
}

/* ---------- Core typography primitives ---------- */
.vc-type,
.vc-ui {
  font-family: var(--vc-font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.vc-hero,
.vc-display,
.vc-h1,
.vc-h2,
.vc-h3 {
  margin: 0;
  text-wrap: balance;
}

.vc-hero {
  font-size: var(--vc-type-hero);
  line-height: var(--vc-leading-tight);
  letter-spacing: var(--vc-track-display);
  font-weight: var(--vc-weight-bold);
}

.vc-display {
  font-size: var(--vc-type-display);
  line-height: var(--vc-leading-tight);
  letter-spacing: var(--vc-track-display);
  font-weight: var(--vc-weight-bold);
}

.vc-h1 {
  font-size: var(--vc-type-h1);
  line-height: var(--vc-leading-heading);
  letter-spacing: var(--vc-track-heading);
  font-weight: var(--vc-weight-bold);
}

.vc-h2 {
  font-size: var(--vc-type-h2);
  line-height: var(--vc-leading-heading);
  letter-spacing: var(--vc-track-heading);
  font-weight: var(--vc-weight-semibold);
}

.vc-h3 {
  font-size: var(--vc-type-h3);
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: var(--vc-weight-semibold);
}

.vc-body-lg { font-size: var(--vc-type-body-lg); line-height: var(--vc-leading-body); }
.vc-body { font-size: var(--vc-type-body); line-height: var(--vc-leading-body); }
.vc-small { font-size: var(--vc-type-small); line-height: 1.4; }
.vc-meta {
  font-size: var(--vc-type-meta);
  line-height: 1.25;
  font-weight: var(--vc-weight-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.vc-number {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.045em;
  font-weight: var(--vc-weight-bold);
}

.vc-mono {
  font-family: var(--vc-font-mono);
  font-variant-numeric: tabular-nums;
}

.vc-muted { color: var(--vc-ink-muted); }
.vc-secondary { color: var(--vc-ink-secondary); }

/* ---------- Physical surfaces ---------- */
.vc-canvas {
  background: var(--vc-bg);
  color: var(--vc-bg-ink);
}

.vc-canvas > .vc-secondary,
.vc-canvas .vc-secondary { color: var(--vc-bg-ink-muted); }

.vc-canvas .vc-surface .vc-secondary,
.vc-canvas .vc-object .vc-secondary,
.vc-canvas .vc-overlay .vc-secondary { color: var(--vc-ink-secondary); }

.vc-surface {
  background: var(--vc-surface);
  color: var(--vc-ink);
}

.vc-object {
  position: relative;
  background: var(--vc-surface-raised);
  color: var(--vc-ink);
  border: var(--vc-line-1) solid var(--vc-line-strong);
  border-radius: var(--vc-radius-1);
  box-shadow: var(--vc-shadow-contact);
}

.vc-object--major {
  box-shadow: var(--vc-shadow-object);
}

.vc-overlay {
  position: relative;
  background: var(--vc-surface-raised);
  color: var(--vc-ink);
  border: var(--vc-line-1) solid var(--vc-line-strong);
  border-radius: var(--vc-radius-2);
  box-shadow: var(--vc-shadow-overlay);
}

/* Static print texture; opt-in only. */
.vc-grain {
  position: relative;
  isolation: isolate;
}

.vc-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border-radius: inherit;
  background-image: var(--vc-grain-image);
  background-size: 96px 96px;
  mix-blend-mode: multiply;
  opacity: var(--vc-grain-opacity);
}

html[data-vc-theme="carbon"] .vc-grain::after,
html[data-vc-theme="kelp"] .vc-grain::after,
html[data-vc-theme="plum"] .vc-grain::after,
html[data-vc-theme="cobalt"] .vc-grain::after {
  mix-blend-mode: soft-light;
}

html[data-vc-texture="reduced"] .vc-grain::after,
html[data-vc-texture="off"] .vc-grain::after {
  display: none;
}

/* ---------- Structural rules ---------- */
.vc-rule { border: 0; border-top: var(--vc-line-1) solid var(--vc-line); margin: 0; }
.vc-rule--strong { border-top-width: var(--vc-line-2); border-top-color: var(--vc-line-strong); }
.vc-rule--emphasis { border-top-width: var(--vc-line-4); border-top-color: var(--vc-line-strong); }

/* ---------- Controls ---------- */
.vc-button {
  appearance: none;
  min-height: 44px;
  padding: var(--vc-space-3) var(--vc-space-4);
  border: var(--vc-line-2) solid var(--vc-line-strong);
  border-radius: var(--vc-radius-1);
  background: var(--vc-surface-raised);
  color: var(--vc-ink);
  font: var(--vc-weight-semibold) var(--vc-type-body)/1 var(--vc-font-sans);
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--vc-line-strong);
  transform: translateY(0);
  transition:
    transform var(--vc-duration-press) var(--vc-ease-snap),
    box-shadow var(--vc-duration-press) var(--vc-ease-snap),
    background var(--vc-duration-nav) var(--vc-ease-ui),
    color var(--vc-duration-nav) var(--vc-ease-ui);
}

.vc-button:hover { background: var(--vc-bg-alt); }
.vc-button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--vc-line-strong); }
.vc-button:focus-visible { outline: var(--vc-line-4) solid var(--vc-focus); outline-offset: 3px; }

.vc-button--primary {
  background: var(--vc-accent);
  color: var(--vc-on-accent);
  border-color: var(--vc-line-strong);
}
.vc-button--primary:hover { background: color-mix(in srgb, var(--vc-accent) 88%, var(--vc-ink)); }

.vc-button--quiet {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.vc-button--quiet:active { transform: translateY(1px); box-shadow: none; }

/* ---------- Graphic status language ---------- */
.vc-danger {
  background-color: color-mix(in srgb, var(--vc-danger) 8%, transparent);
  background-image: var(--vc-danger-pattern);
  border-color: var(--vc-danger);
}

.vc-success {
  background-color: color-mix(in srgb, var(--vc-success) 8%, transparent);
  background-image: var(--vc-success-pattern);
  border-color: var(--vc-success);
}

.vc-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--vc-line-4) solid currentColor;
  padding: 5px 9px 4px;
  color: var(--vc-ink);
  font: var(--vc-weight-bold) var(--vc-type-meta)/1 var(--vc-font-sans);
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(-2deg);
}

/* ---------- Icon system ---------- */
.vc-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  flex: 0 0 auto;
  color: currentColor;
  overflow: visible;
}
.vc-icon * {
  vector-effect: non-scaling-stroke;
}

/* ---------- Responsive composition primitives ---------- */
.vc-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--vc-space-3);
  padding-inline: var(--vc-space-4);
}

@media (min-width: 768px) {
  .vc-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: var(--vc-space-4);
    padding-inline: var(--vc-space-5);
  }
}

@media (min-width: 1100px) {
  .vc-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(20px, 1.7vw, 24px);
    padding-inline: clamp(32px, 4vw, 64px);
  }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vc-duration-press: 1ms;
    --vc-duration-nav: 1ms;
    --vc-duration-reveal: 1ms;
    --vc-duration-physical: 70ms;
    --vc-duration-milestone: 100ms;
  }

  .vc-button,
  .vc-ui * {
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --vc-line: var(--vc-line-strong);
    --vc-grain-opacity: 0;
  }
}

@media (forced-colors: active) {
  .vc-button,
  .vc-object,
  .vc-overlay,
  .vc-stamp {
    forced-color-adjust: auto;
  }
  .vc-grain::after { display: none; }
}

/* === V6 POST-RELEASE LAYOUT HOTFIX ===================================== */
/* Keep the full 44px pause hit target in the otherwise-empty top center
   strip while rendering it as a bare control so no opaque surface covers HUD
   information at narrow widths. */
#pauseBtn{
  left:50%!important;
  right:auto!important;
  top:0!important;
  transform:translateX(-50%)!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  color:var(--vc-on-substrate)!important;
}
#pauseBtn:active{
  transform:translate(-50%,2px)!important;
  box-shadow:none!important;
}
#recordsPanel .screen-nav #recordsBack{
  width:auto!important;
  min-width:104px!important;
  max-width:none!important;
  margin:0!important;
  margin-left:0!important;
  margin-right:0!important;
}