/*
 * VickitMod Modular Signal — implementation tokens
 * Version: 1.0 / 2026-09-21
 * Status: approved design-system source; not a production stylesheet.
 * Fonts must be self-hosted and license-checked before release.
 */

:root {
  /* Brand and semantic colors */
  --vtm-color-ink-950: #111820;
  --vtm-color-ink-900: #18222c;
  --vtm-color-titanium-700: #4f5c67;
  --vtm-color-titanium-600: #687583;
  --vtm-color-titanium-300: #b8c1c7;
  --vtm-color-line-200: #dce1e3;
  --vtm-color-surface-100: #eef1f1;
  --vtm-color-canvas-50: #f7f8f6;
  --vtm-color-white: #ffffff;

  --vtm-color-signal-500: #ff5a2f;
  --vtm-color-signal-600: #ed4c24;
  --vtm-color-signal-700: #c13a16;
  --vtm-color-fit-300: #bcecf2;
  --vtm-color-fit-400: #83d8e8;
  --vtm-color-fit-900: #0a3e49;

  --vtm-color-success-700: #176247;
  --vtm-color-warning-700: #8a4e08;
  --vtm-color-error-700: #a32727;

  /* Text roles */
  --vtm-text-primary: var(--vtm-color-ink-950);
  --vtm-text-secondary: var(--vtm-color-titanium-700);
  --vtm-text-muted: var(--vtm-color-titanium-600);
  --vtm-text-inverse: var(--vtm-color-white);
  --vtm-link-default: var(--vtm-color-ink-950);
  --vtm-link-accent: var(--vtm-color-signal-700);

  /* Typography */
  --vtm-font-display: "Sora", "Avenir Next", "Segoe UI", sans-serif;
  --vtm-font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --vtm-font-data: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --vtm-font-size-100: 0.75rem;
  --vtm-font-size-200: 0.875rem;
  --vtm-font-size-300: 1rem;
  --vtm-font-size-400: 1.125rem;
  --vtm-font-size-500: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);
  --vtm-font-size-600: clamp(1.75rem, 1.4rem + 1.3vw, 2.5rem);
  --vtm-font-size-700: clamp(2.25rem, 1.6rem + 2.5vw, 4.5rem);

  --vtm-line-height-tight: 1.05;
  --vtm-line-height-heading: 1.15;
  --vtm-line-height-body: 1.6;
  --vtm-letter-spacing-eyebrow: 0.12em;

  /* Eight-point spatial system */
  --vtm-space-1: 0.25rem;
  --vtm-space-2: 0.5rem;
  --vtm-space-3: 0.75rem;
  --vtm-space-4: 1rem;
  --vtm-space-5: 1.5rem;
  --vtm-space-6: 2rem;
  --vtm-space-7: 3rem;
  --vtm-space-8: 4rem;
  --vtm-space-9: 6rem;
  --vtm-space-10: 8rem;

  /* Layout */
  --vtm-container-max: 90rem;
  --vtm-container-gutter: clamp(1rem, 3vw, 3rem);
  --vtm-grid-columns: 12;
  --vtm-grid-gap: clamp(1rem, 1.7vw, 1.5rem);
  --vtm-section-block: clamp(4rem, 7vw, 7rem);
  --vtm-reading-width: 44rem;

  /* Shape and depth */
  --vtm-radius-xs: 0.25rem;
  --vtm-radius-sm: 0.5rem;
  --vtm-radius-md: 0.75rem;
  --vtm-border-default: 1px solid var(--vtm-color-line-200);
  --vtm-shadow-card: 0 0.5rem 1.75rem rgba(17, 24, 32, 0.08);
  --vtm-shadow-focus: 0 0 0 0.1875rem rgba(131, 216, 232, 0.7);

  /* Motion */
  --vtm-duration-fast: 120ms;
  --vtm-duration-standard: 200ms;
  --vtm-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* Stable component dimensions */
  --vtm-control-height: 48px;
  --vtm-control-height-large: 56px;
  --vtm-header-height-desktop: 72px;
  --vtm-header-height-mobile: 64px;
  --vtm-touch-target-min: 44px;
}

/*
 * Accessibility rules:
 * - Signal orange (#ff5a2f) uses ink text (#111820), never white body text.
 * - Accent links on light surfaces use signal-700 (#c13a16).
 * - Fit cyan is reserved for evidence states and uses fit-900 or ink text.
 * - Every interactive state must have a non-color cue and visible keyboard focus.
 * - Respect prefers-reduced-motion; no essential information may depend on animation.
 */