/* Design tokens — colors, shape, shadows.
   Consumed by base.css, components/*.css, and page stylesheets.
   A frontend team porting this to a theme system (Tailwind config,
   CSS-in-JS, etc.) maps each variable below to its own token. */

:root {
  /* Color — surface */
  --bg-1: #0f1b33;
  --bg-2: #0b1530;
  --card: #111827F0;
  --card-stroke: #1f2937;

  /* Color — ink */
  --ink: #e5e7eb;
  --muted: #b8c6da;

  /* Color — accent */
  --gold: #f4b000;
  --gold-700: #d39a00;

  /* Shape */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 25px 80px rgba(0, 0, 0, .35), 0 2px 0 rgba(255, 255, 255, .02) inset;

  /* Ink — extended */
  --ink-secondary: #cbd5e1;
  --muted-dark: #7f90a6;

  /* Sidebar + layout */
  --bg-sidebar: #0a1428;
  --bg-sidebar-hover: rgba(255, 255, 255, 0.045);
  --bg-elevated: #1a2236;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --shadow-sidebar: 4px 0 24px rgba(0, 0, 0, 0.28);
  --sidebar-width: 250px;
  --sidebar-collapsed-width: 82px;
  --header-h: 88px;
  --transition-sidebar: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

  /* Type steps used by sidebar */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition-sidebar: 0s; }
}