/*
 * Sigma Ups colors and sizes.
 *
 * The page has a chat-app shell (a rail, a sidebar, a header) on the sigmashake brand: a black field, grey
 * surfaces, red for the mark, white for the edge, and black text on red. The --sd-* tokens are the shell
 * surfaces and text. The --su-* tokens are the roles of the game. palette.js has the same values for the
 * canvas. The test test/unit/sigma-ups-palette.test.ts checks that the two files agree.
 * The sunrise sky stays. It is the ground behind the painted biome plates in the playfield.
 * The vendored ./brand/tokens.css (a byte copy of shared/design-tokens/tokens.css, linked before this
 * file) gives radii, type and the shell sizes. Its brand colors are not used on this page.
 */

:root {
  /* The shell. Same values as sigmashake-remote-ios/App/Theme.swift, dark. */
  --sd-rail: #000000;
  --sd-bg: #121212;
  --sd-floating: #1a1a1a;
  --sd-selected: #262626;
  --sd-sidebar: #0a0a0a;
  --sd-hover: #1a1a1a;
  --sd-active: #303030;
  --sd-text: #d9d9d9;
  --sd-muted: #9e9e9e;
  --sd-header: #ffffff;
  --sd-accent: #ff0000;
  --sd-on-accent: #000000;
  --sd-border: #262626;
  --sd-border-strong: #757575;

  /* The shell sizes. The rail is 72 px, the sidebar 240 px, the header 48 px, a row 32 px, an avatar 40 px. */
  --sd-rail-w: var(--ss-shell-rail-w);
  --sd-sidebar-w: var(--ss-shell-sidebar-w);
  --sd-header-h: var(--ss-shell-header-h);
  --sd-row-h: var(--ss-row-h);
  --sd-avatar: var(--ss-msg-avatar);
  --sd-tab-h: 56px;

  /* Roles. The field, the edge and the mark. */
  --su-bg: #000000;
  --su-fg: #ffffff;
  --su-accent: #ff0000;
  --su-accent-fill: var(--su-accent);
  --su-on-accent: #000000;

  /* Grounds and secondary text. --su-n1 and --su-n2 are the Squad Flight card grounds: the seat colors are
     measured on them (sigma-ups-live-dummy.test.ts), and privacy.html still paints with them. They are neutral
     greys, the same values as --sd-bg and --sd-floating. They are written as hex because the tests read them. */
  --su-n1: #121212;
  --su-n2: #1a1a1a;
  --su-n3: rgb(255 255 255 / 0.08);
  --su-fg-2: #9e9e9e;
  --su-fg-3: #757575;
  --su-line: rgb(255 255 255 / 0.12);
  --su-scrim: rgb(0 0 0 / 0.86);
  --su-scrim-strong: rgb(0 0 0 / 0.78);
  --su-scrim-menu: rgb(0 0 0 / 0.92);

  /* The Squad Flight rail: pure black. The 20 seat colors are measured on it (live-figure.js
     LIVE_RAIL_BACKGROUND), and the seat number is black text on a seat color. */
  --su-rail: #000000;

  /* Game states. A state is also a shape or a word, never a color alone. */
  --su-clean: #5ce08f;
  --su-fault: #ff5c6c;
  --su-shield: #00e5ff;

  /* HUD pills: one neutral edge, a red edge for the coach line, and the hit wash. */
  --su-pill-coach: rgb(255 0 0 / 0.6);
  --su-pill-fault: rgb(255 92 108 / 0.6);
  --su-fault-tint: rgb(255 92 108 / 0.14);
  --su-hurt: rgb(255 0 0 / 0.55);

  /* Gauges: the depth bar, the camera-range track and its ideal band and marker. */
  --su-depth-fill: linear-gradient(90deg, var(--su-fg-3), var(--su-accent));
  --su-range-track: linear-gradient(
    90deg,
    var(--su-fg-3) 0%,
    var(--sd-sidebar) 18%,
    var(--sd-sidebar) 82%,
    var(--su-fg-3) 100%
  );
  --su-ideal-fill: rgb(92 224 143 / 0.35);
  --su-ideal-line: rgb(92 224 143 / 0.7);
  --su-marker: #ffffff;

  /* The sunrise sky, behind the painted plates in the stage (art/skyline-dragon/README.md). */
  --su-sky: linear-gradient(180deg, #ff7a3d 0%, #ffb347 55%, #ffe08a 100%);

  /* Spacing: multiples of 4 px (values from sigmashake-design/enterprise.css --space-*). */
  --su-space-1: 4px;
  --su-space-2: 8px;
  --su-space-3: 12px;
  --su-space-4: 16px;
  --su-space-5: 20px;
  --su-space-6: 24px;
  --su-space-8: 32px;
  --su-space-12: 48px;
  --su-hit: 44px;

  /* Type scale. Nothing below 12 px. Display sizes are for titles and the hero number only. */
  --su-font: var(--ss-font-system);
  --su-font-mono: var(--ss-font-mono);
  --su-font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --su-text-xs: 12px;
  --su-text-sm: 14px;
  --su-text-md: 16px;
  --su-text-lg: 18px;
  --su-text-xl: 20px;
  --su-text-2xl: 24px;
  --su-display-sm: 32px;
  --su-display-md: 48px;
  --su-display-lg: 64px;

  /* Motion. */
  --su-ease: cubic-bezier(0.2, 0, 0, 1);
  --su-duration-fast: 150ms;
  --su-duration-base: 200ms;
  --su-duration-slow: 300ms;
  --su-duration-count: 1000ms;
  --su-flash: 120ms;

  /* Stacking, innermost first. The rail is outside the stage, above it. The draft is inside the stage. */
  --su-z-hud: 2;
  --su-z-target: 3;
  --su-z-flash: 6;
  --su-z-overlay: 10;
  --su-z-autoplay: 12;
  --su-z-menu: 20;
  --su-z-rail: 24;
  --su-z-ad: 30;
  --su-z-draft: 36;
  --su-z-toast: 40;
}