/* Nocturne — the design system's tokens, taken from the handoff bundle.
 *
 * These values are the design's source of truth: a near-neutral blue-grey
 * ground, a single blurple accent used as line and glow rather than fill, an
 * OKLCH-derived 100–900 ramp per role so the same step of any ramp carries the
 * same visual weight, and a compact 0.7x spacing scale.
 *
 * Retune here, nowhere else. Two rules from the system's guide that the rest of
 * this codebase follows: never hard-code a hex or a px the tokens already
 * carry, and never flood an area with the accent.
 */

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #9184d9;
  --color-accent-2: #a7a1db;
  --color-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --color-neutral-100: #f3f5fe;
  --color-neutral-200: #e4e7f5;
  --color-neutral-300: #cfd3e5;
  --color-neutral-400: #b2b6ca;
  --color-neutral-500: #9397ab;
  --color-neutral-600: #75798c;
  --color-neutral-700: #595d6c;
  --color-neutral-800: #3f424d;
  --color-neutral-900: #292b31;

  --color-accent-100: #f5f4ff;
  --color-accent-200: #e7e5fe;
  --color-accent-300: #d2cefd;
  --color-accent-400: #b5abfc;
  --color-accent-500: #968ae0;
  --color-accent-600: #796cbf;
  --color-accent-700: #5d5294;
  --color-accent-800: #423a6a;
  --color-accent-900: #2b2741;

  --color-accent-2-100: #f5f4ff;
  --color-accent-2-200: #e7e5fe;
  --color-accent-2-300: #d2cefd;
  --color-accent-2-400: #b5afe8;
  --color-accent-2-500: #9690c9;
  --color-accent-2-600: #7972a9;
  --color-accent-2-700: #5c5783;
  --color-accent-2-800: #423e5d;
  --color-accent-2-900: #2b293a;

  /* The one warm note in the palette: reserved for "this is not right" --
     warm air with the pump off, an offline switch, a refused command. It is
     deliberately outside the accent family so it cannot be mistaken for a
     normal state. */
  --color-warm: #c79a6b;
  --color-warm-text: #e3c9a9;

  /* Vazirmatn carries Persian and Latin, so one family serves both; the
     design pairs it ahead of Inter. */
  --font-body: "Vazirmatn", Inter, system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-body);
  --font-heading-weight: 500;

  --space-1: 2.8px;
  --space-2: 5.6px;
  --space-3: 8.4px;
  --space-4: 11.2px;
  --space-6: 16.8px;
  --space-8: 22.4px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* On a dark ground, elevation is a hairline edge plus ambient darkness --
     never a stack of heavy shadows. */
  --shadow-sm: 0 0 0 1px #3f424d;
  --shadow-md: 0 0 0 1px #595d6c, 0 6px 18px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0, 0, 0, 0.65);

  /* Device insets, so the installed app clears the notch and home indicator.
     The design's own header padding (58px in the standalone app, 10px inside
     Telegram) is applied per host in base.css. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* A touch target you can actually hit. Every interactive element in the
     design is at least this tall. */
  --tap: 44px;
}