/* ULTRA · shared visual contract. Module CSS owns composition, not brand values. */
:root {
  color-scheme: dark;
  --color-canvas: #080808;
  --color-surface: #151515;
  --color-elevated: #222222;
  --color-text-primary: #f7f7f7;
  --color-text-secondary: #b5b5b5;
  --color-text-tertiary: #909090;
  --color-accent: #ff3b36;
  --color-hairline: rgba(255,255,255,.12);
  --color-video-black: #000000;
  --color-reader-paper: #111113;
  --color-reader-ink: #f2f2f3;
  --color-reader-muted: #b6b6be;
  --color-reader-accent: #ff625d;

  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-ui);
  --font-reading: var(--font-ui);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;
  --radius-artwork: 10px; --radius-portrait: 14px; --radius-editorial: 18px;
  --radius-panel: 28px; --radius-dock: 32px; --radius-pill: 9999px;
  --duration-press: 120ms; --duration-state: 180ms; --duration-panel: 220ms;
  --duration-content: 260ms; --duration-settle: 200ms;
  --glass-blur: 12px; --glass-saturation: 120%;
  --ease-out: cubic-bezier(.2,0,0,1);
  --glass-surface: rgba(20,20,20,.82);
  --glass-stroke: rgba(255,255,255,.14);
  --glass-shadow: 0 8px 30px #0005, inset 0 1px 0 #ffffff1a;
  --control-glass: linear-gradient(145deg,#ffffff0b,transparent 70%),rgba(20,20,20,.82);

  /* Compatibility aliases keep every existing module on the same source. */
  --app-width: 480px;
  --app-gutter: var(--space-5);
  --app-header-height: 56px;
  --app-nav-height: calc(102px + env(safe-area-inset-bottom,0px));
  --app-font: var(--font-ui); --font: var(--font-ui); --title: var(--font-display);
  --app-canvas: var(--color-canvas); --app-surface: var(--color-surface);
  --app-text: var(--color-text-primary); --app-muted: var(--color-text-secondary);
  --app-accent: var(--color-accent); --red: var(--color-accent);
  --app-border: var(--color-hairline); --finish-line: var(--color-hairline);
  --rd-paper: var(--color-reader-paper); --rd-ink: var(--color-reader-ink);
  --rd-muted: var(--color-reader-muted); --rd-red: var(--color-reader-accent);
}
@media (max-width:360px) { :root { --app-gutter: var(--space-4); } }