/* Canonical DWE design tokens (from doc-ui/design-tokens.json).
   Aliases keep existing torchlit variable names working. */
:root {
  /* Color — canvas & surfaces */
  --color-bg-canvas: #090e14;
  --color-bg-workspace: #0d141d;
  --color-surface-1: #111923;
  --color-surface-2: #17212d;
  --color-surface-3: #1d2935;
  --color-border-default: #2a3948;
  --color-border-strong: #3c5264;
  --color-border-focus: #e88b43;
  --color-text-primary: #e9e2d5;
  --color-text-secondary: #9aa8b5;
  --color-text-muted: #72808d;
  --color-text-inverse: #090e14;
  --color-accent-primary: #e88b43;
  --color-accent-hover: #f6ad69;
  --color-accent-pressed: #cc6e2d;
  --color-accent-subtle: #3a281e;
  --color-semantic-success: #72a985;
  --color-semantic-danger: #c75b5b;
  --color-semantic-warning: #d7a552;
  --color-semantic-info: #6f9fbf;
  --color-semantic-magic: #9277c9;

  /* Typography (VIS-002 / VIS-003) */
  --font-ui: Inter, "IBM Plex Sans", system-ui, sans-serif;
  --font-narrative: "Source Serif 4", Georgia, serif;
  /* Latin-only pixel face; Cyrillic falls through to Manrope */
  --font-display-cyrillic: Manrope, Inter, "IBM Plex Sans", system-ui, sans-serif;
  --font-display-pixel: "DW Pixel Latin", var(--font-display-cyrillic);
  --font-mono-token: "IBM Plex Mono", SFMono-Regular, monospace;
  /* Play aliases — pixel display for short Latin headings/badges */
  --font-body: var(--font-ui);
  --font-display: var(--font-display-pixel);
  --font-mono: var(--font-mono-token);
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-2xl: 32px;
  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-narrative: 1.55;

  /* Spacing / radius / borders */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm-token: 4px;
  --radius-md-token: 6px;
  --radius-pill: 999px;
  --border-hairline: 1px;
  --border-strong: 2px;

  /* Atmosphere (VIS-006 texture guidance: 2–5% opacity) */
  --texture-opacity: 0.035;
  --atmosphere-vignette: radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(0, 0, 0, 0.28) 100%);
  --surface-frame:
    inset 1px 1px 0 rgba(255, 255, 255, 0.045),
    inset -1px -1px 0 rgba(0, 0, 0, 0.35);
  --surface-raised-shadow: 6px 8px 0 rgba(0, 0, 0, 0.45);
  --chrome-furniture-bg: linear-gradient(180deg, #141d28 0%, #0c1219 100%);
  --chrome-furniture-edge: var(--color-border-strong);

  /* Motion */
  --motion-hover: 100ms;
  --motion-focus: 120ms;
  --motion-window-open: 160ms;
  --motion-window-transition: 180ms;
  --motion-snap-preview: 100ms;
  --motion-state-change: 240ms;
  --motion-dice-min: 600ms;
  --motion-dice-max: 900ms;

  /* Z-index (WM) */
  --z-base-canvas: 0;
  --z-scene-content: 10;
  --z-window-start: 100;
  --z-window-focused: 500;
  --z-window-always-on-top: 700;
  --z-snap-preview: 900;
  --z-modal-backdrop: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
  --z-drag-ghost: 1300;

  /* Window system */
  --window-title-bar-height: 40px;
  --window-control-target: 32px;
  --window-visible-title-min: 48px;
  --window-snap-edge-preview: 24px;
  --window-snap-magnetic: 12px;
  --window-snap-gap: 8px;
  --window-snap-unsnap-hysteresis: 20px;
  --window-persist-debounce: 400ms;

  /* Compatibility aliases → existing play theme names */
  --ink: var(--color-bg-canvas);
  --stone: var(--color-surface-2);
  --ledge: var(--color-border-default);
  --ledge-soft: color-mix(in srgb, var(--color-border-default) 65%, transparent);
  --parchment: var(--color-text-primary);
  --ash: var(--color-text-secondary);
  --ember: var(--color-accent-primary);
  --ember-soft: color-mix(in srgb, var(--color-accent-primary) 14%, transparent);
  --ember-glow: color-mix(in srgb, var(--color-accent-primary) 35%, transparent);
  --torch: var(--color-accent-hover);
  --moss: var(--color-semantic-success);
  --moss-soft: color-mix(in srgb, var(--color-semantic-success) 16%, transparent);
  --blood: var(--color-semantic-danger);
  --blood-soft: color-mix(in srgb, var(--color-semantic-danger) 16%, transparent);
  --bg: var(--color-bg-canvas);
  --surface: var(--color-surface-2);
  --border: var(--color-border-default);
  --text: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --accent: var(--color-accent-primary);
  --ok: var(--color-semantic-success);
  --warn: var(--color-semantic-warning);
  --danger: var(--color-semantic-danger);
  --mono: var(--font-mono-token);
  --pixel-highlight: #3b4a5c;
  --pixel-shadow: #080c11;
  --pixel-panel: var(--color-surface-1);
}

/* Prefer Manrope when UI language is Russian (broken Pixelify Cyrillic) */
html[lang="ru"] {
  --font-display: var(--font-display-cyrillic);
  --font-display-pixel: var(--font-display-cyrillic);
}

/* TYPE-001 / TYPE-002 utility classes (Phase 19) */
.text-display {
  font-family: var(--font-display);
  font-weight: 650;
  letter-spacing: 0.04em;
}

.text-ui {
  font-family: var(--font-ui);
}

.text-narrative {
  font-family: var(--font-narrative);
  line-height: var(--line-height-narrative);
}

.text-mono,
.numeric,
.mono {
  font-family: var(--font-mono-token);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}