/* My VR Media Player design tokens — mirror the Android Mono palette (Color.kt). Single source for web. */
:root {
  --mono-black: #000000;
  --mono-900: #0a0a0a;
  --mono-800: #161616;
  --mono-700: #232323;
  --mono-600: #2e2e2c;
  --mono-500: #5a5a5a;
  --mono-400: #9a9a9a;
  --mono-300: #cfcfcf;
  --mono-200: #dcdcdc;
  --mono-100: #e9e9e9;
  --mono-50: #f5f5f5;
  --mono-white: #ffffff;

  --bg: var(--mono-900);
  --panel: var(--mono-800);
  --line: #2a2a2e;
  --line-strong: #3a3a3f;
  --text: #f2f2f2;
  --muted: #b6b6bd;
  --btn: var(--text);
  --btn-ink: var(--bg);

  /* Device screenshots are always shown on a dark surface so the
     transparent phone mockups keep their contrast in both themes. */
  --shot-bg: #0b0b0b;
  --shot-line: #26262a;
  --shot-muted: #b6b6bd;

  --radius: 14px;
  --radius-lg: 20px;
  --max: 1040px;

  --motion-fast: 150ms;
  --motion-slow: 500ms;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: var(--mono-50);
    --panel: #ffffff;
    --line: var(--mono-200);
    --line-strong: #c4c4c8;
    --text: #111111;
    --muted: #5a5a5a;
  }
}