/**
 * @ursamu/site — design tokens.
 *
 * COLOR / TYPE FACE = UrsaMU violet night (staff-theme.css).
 * LAYOUT / TYPE SCALE = Figma Home wireframe node 2054:137
 *   https://www.figma.com/design/BKP8DKLEwj0MzrzdFjU0m0/
 *   Court-of-Miracles?node-id=2054-137
 *
 * That frame is the default public shell structure (grayscale
 * wireframe). Court cream/gold is a separate installable skin —
 * it does not redefine these layout numbers in tokens.css.
 *
 * @see packages/web/ui/src/assets/staff-theme.css
 * @see packages/site/docs/figma-wireframe-home.md
 */

:root {
  /* ── Surfaces (staff --bg*) ─────────────────────────────────── */
  --site-bg: #0b0a12;
  --site-bg-elevated: #12101c;
  --site-bg-surface: #161422;
  --site-bg-surface-2: #1c1929;
  --site-bg-code: #0e0c16;

  /* ── Borders (staff --border*) ──────────────────────────────── */
  --site-border: #3a3554;
  --site-border-subtle: #2a2640;
  --site-border-strong: #5a5480;

  /* ── Text (staff --text*) ──────────────────────────────────── */
  --site-text: #f0eef8;
  --site-text-secondary: #c4c0d4;
  --site-text-muted: #b0a9c4;
  --site-text-on-accent: #ffffff;
  --site-text-on-primary: #ffffff;
  --site-text-inverse: #0b0a12;

  /*
   * Brand accent (staff --primary*) — links, chips, nav active.
   * Lighter violet for AA on --site-bg. Solid CTAs use --site-btn-*.
   */
  --site-accent: #a78bfa;
  --site-accent-hover: #c4b5fd;
  --site-accent-muted: rgba(167, 139, 250, 0.16);
  --site-accent-border: rgba(167, 139, 250, 0.45);
  --site-accent-focus: rgba(167, 139, 250, 0.55);

  /* Solid primary button (staff --btn-primary-*) */
  --site-btn-bg: #6d28d9;
  --site-btn-bg-hover: #7c3aed;
  --site-btn-fg: var(--site-text-on-primary);

  /* Secondary / outline (staff --btn-default-* / outline) */
  --site-btn-default-bg: var(--site-bg-surface-2);
  --site-btn-default-fg: var(--site-text);
  --site-btn-default-border: var(--site-border-strong);
  --site-btn-outline-fg: var(--site-text);
  --site-btn-outline-border: var(--site-border-strong);

  /* Status (staff --success etc.) */
  --site-success: #4ade9f;
  --site-warning: #f0c14d;
  --site-error: #ff8a8f;
  --site-info: #8ec5ff;

  /* Geometry (staff radius / control) */
  --site-radius-sm: 4px;
  --site-radius-md: 6px;
  --site-radius: var(--site-radius-md);
  --site-control-h: 2.35rem;

  /* Type face — Inter (staff). Wireframe uses Lato; default maps
   * the same sizes onto Inter. Court skin may swap faces. */
  --site-font-ui: Inter, ui-sans-serif, system-ui, -apple-system,
    sans-serif;
  --site-font-display: var(--site-font-ui);
  --site-font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono",
    Menlo, Consolas, monospace;
  --site-font-size: 16px; /* wireframe body Lato 16 */
  --site-line-height: 1.5;

  /* Type scale — Figma 2054:137 (Lato sizes → Inter) */
  --site-type-brand: 1.5rem; /* 24 / 700 Game Name */
  --site-type-nav: 1rem; /* 16 / 400 nav links */
  --site-type-menu-title: 1.25rem; /* 20 / 700 menu header */
  --site-type-menu-link: 1rem; /* 16 / 400 */
  --site-type-h1: 2.5rem; /* 40 / 700 */
  --site-type-h2: 2rem; /* 32 / 700 */
  --site-type-connect: 1.25rem; /* 20 host under H1 */
  --site-type-footer: 1rem; /* 16 */

  /* Scrollbars — violet night, thin (staff palette, smaller bar) */
  --site-scrollbar-size: 6px;
  --site-scrollbar-track: var(--site-bg-elevated);
  --site-scrollbar-thumb: #3a3454;
  --site-scrollbar-thumb-hover: #524a72;
  --site-scrollbar-thumb-active: var(--site-accent);
  --site-scrollbar-corner: var(--site-bg-elevated);

  /*
   * Shell layout — Figma Home wireframe 2054:137 @ 1728
   *   gutter 42 | aside 314 | gap 21 | main 977 | gap ~17 | aside 312 | gutter 42
   *   nav 102 · search 44
   * (public FE only — not in staff-theme)
   */
  --site-nav-h: 6.375rem; /* 102 */
  --site-max-w: 108rem; /* 1728 */
  --site-main-max: 61.0625rem; /* 977 */
  --site-aside-width: 19.625rem; /* 314 */
  --site-aside-min: 16rem;
  --site-aside-max: 19.625rem; /* 314 */
  --site-col-gap: 1.3125rem; /* 21 */
  --site-search-h: 2.75rem; /* 44 */
  --site-search-below: 2.0625rem; /* ~33 menu under search */
  --site-main-pad-inline: 0;
  --site-gutter: 2.625rem; /* 42 */
  --site-banner-offset: 12rem;
  --site-sticky-top: calc(var(--site-nav-h) + 1.5rem);

  /* Optional skin art (default: none) */
  --site-bg-image-top: none;
  --site-bg-image-bottom: none;
  --site-banner-image: none;
  --site-rule-image: none;
  --site-search-icon: none;

  /*
   * Termv-2 media ornaments:
   *   sep-top    = top-end bracket cap (right side of top rail)
   *   sep-bottom = bottom-end bracket cap (left side of bottom rail)
   * Hairline between caps is CSS (--site-sep-line-color).
   * Banner / logo: seps forced off (.site-media--banner).
   */
  --site-sep-top: none;
  --site-sep-bottom: none;
  --site-sep-h: 15px;
  /* Mock: rails float just outside the photo (no pad band) */
  --site-sep-pad-y: 0;
  --site-sep-top-offset: -7px;
  --site-sep-bottom-offset: -7px;
  /* Hairline only, relative to the bottom rail box */
  --site-sep-bottom-tail-offset: 15px;
  --site-sep-inset-end: 25px; /* open-end inset */
  --site-sep-bracket-w: 53px; /* native sep-top/bottom width */
  --site-sep-line-color: rgba(255, 255, 255, 0.5);
  --site-portrait-ratio: 180 / 240;
  --site-sep-z: 5;

  /* Play placeholder */
  --site-play-placeholder: var(--site-text-muted);

  color-scheme: dark;
}