/* VIDEOMAT Theme Contract v1
   Stable selectors live here. Themes should mainly set variables in tokens.css. */
:root {
  --v-bg: #0b0b0f;
  --v-surface: #12131a;
  --v-surface-2: #171924;
  --v-text: #eef0f6;
  --v-text-strong: #ffffff;
  --v-text-muted: rgba(238,240,246,.70);
  --v-border: rgba(255,255,255,.14);
  --v-border-strong: rgba(255,255,255,.24);
  --v-accent: #8f6bff;
  --v-accent-rgb: 143,107,255;
  --v-danger: #fb7185;
  --v-success: #22c55e;
  --v-radius: 14px;
  --v-radius-sm: 10px;
  --v-shadow: 0 16px 44px rgba(0,0,0,.28);
  --v-page-max-width: 1280px;
  --v-page-gutter: clamp(16px, 2.4vw, 32px);
  --v-section-gap: clamp(18px, 2vw, 28px);
  --v-panel-gap: clamp(14px, 1.6vw, 22px);
  --v-header-h: 56px;
  --v-font-sans: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --v-font-display: "Roboto Slab", Inter, "Segoe UI", system-ui, sans-serif;
  --v-font-mono: "Roboto Mono", Consolas, monospace;

  /* compatibility aliases for existing code */
  --tf-bg: var(--v-bg);
  --tf-bg-elevated: var(--v-surface);
  --tf-bg-soft: var(--v-surface-2);
  --tf-text: var(--v-text);
  --tf-text-strong: var(--v-text-strong);
  --tf-text-muted: var(--v-text-muted);
  --tf-border: var(--v-border);
  --tf-border-strong: var(--v-border-strong);
  --tf-accent: var(--v-accent);
  --tf-accent-rgb: var(--v-accent-rgb);
  --tf-header-h: var(--v-header-h);
  --tf-panel-radius: var(--v-radius);
  --tf-shadow: var(--v-shadow);
  --tf-font-sans: var(--v-font-sans);
  --tf-font-display: var(--v-font-display);
  --tf-font-mono: var(--v-font-mono);
}

* { box-sizing: border-box; }
html { min-height: 100%; }
body {
  min-height: 100%;
  margin: 0;
  background: var(--v-bg);
  color: var(--v-text);
  font-family: var(--v-font-sans);
  line-height: 1.5;
}
a { color: var(--page-accent, var(--v-accent)); }
img, svg, video { max-width: 100%; }
button, input, select, textarea { font: inherit; }
body.nav-open { overflow: hidden; }