/* The design system's whole vocabulary: every colour, size and spacing
   value application.css is allowed to use. Custom property resolution on
   :root is order-independent, so this file's position relative to
   application.css in the asset pipeline does not matter; Propshaft's
   stylesheet_link_tag :app picks up both. A separate file, rather than a
   :root block inside application.css, is what lets stylelint exempt these
   definitions while banning raw values everywhere else. */

:root {
  /* Colour: the five greys, the accent and the two signal colours */
  --ground: #0e1013;
  --panel: #14171a;
  --line: #22262b;
  --text: #e7ebef;
  --muted: #8b939c;
  --faint: #5c646d;
  --accent: #ff4d3d;
  --signal: #4fd984;
  --signal-peak: #ffb340;

  /* Colour: the stragglers folded in */
  --rail: #101315;
  --hover: #191d21;
  --selected: #1c2126;
  --chip: #232830;
  --text-dim: #cfd5db;
  --chassis-label: #41474e;
  --chassis-unlit: #2a2f35;
  --chassis-needle-unlit: #2f353b;
  --chassis-live-unlit: #23282d;
  --text-disabled: #363c43;
  --text-unlit: #2f353b;
  --scrim: rgb(0 0 0 / 55%);
  --shadow-unit: 0 14px 34px rgb(0 0 0 / 50%);
  --shadow-unit-desktop: 0 24px 60px rgb(0 0 0 / 55%);
  --shadow-float: 0 14px 30px rgb(0 0 0 / 50%);
  --shadow-sheet: 0 -8px 30px rgb(0 0 0 / 45%);
  /* Inset, so a row that takes it keeps the box it had. */
  --ring-cue: inset 0 0 0 1px var(--signal-peak);

  /* Type: nine steps, sitting on the modal value of each cluster so the
     bulk of current uses stay exact. */
  --text-2xs: 0.65rem;
  --text-xs: 0.75rem;
  --text-sm: 0.82rem;
  --text-base: 0.88rem;
  --text-md: 0.95rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.4rem;
  --text-3xl: 1.9rem;

  /* Letter-spacing. The uppercase micro label pairing used throughout
     (chooser heading, seed label, jumper eyebrow, search group heading) is
     --text-2xs + --track-caps + a 600 weight. */
  --track-tight: -0.01em;
  --track-slight: 0.04em;
  --track-label: 0.08em;
  --track-caps: 0.16em;

  /* Spacing: nine steps plus a hairline, anchored on the mass points of the
     distribution. --tap is an accessibility floor, not a step on this
     scale, and must never be merged into it. */
  --space-hair: 0.05rem;
  --space-1: 0.2rem;
  --space-2: 0.3rem;
  --space-3: 0.4rem;
  --space-4: 0.6rem;
  --space-5: 0.75rem;
  --space-6: 0.9rem;
  --space-7: 1rem;
  --space-8: 1.25rem;
  --space-9: 1.5rem;

  /* Page rhythm: mobile/desktop pairs, each a role rather than a step. A
     pair loosens together with room and must never be collapsed to a
     single spacing step, which would erase the bump between them. Redefined
     inside the 45rem query below. */
  --page-pad-top: 0.75rem;
  --page-gutter: 0.85rem;
  --page-pad-bottom: 4rem;
  --gap-seed: 1.25rem;
  --gap-data: 1.5rem;
  --gap-section: 2.25rem;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  /* Tap targets and other fixed dimensions. --tap is the existing
     accessibility floor, unchanged. */
  --tap: 2.75rem;
  --tap-max: 3.25rem;
  --icon: 1.1rem;
  --icon-lg: 1.4rem;
  /* The lit seat a transport glyph sits in. Inside --tap, which stays the
     control's own floor. */
  --transport: 2rem;
  /* Height only. The transport glyphs are wider than they are tall and each
     one is a different width, so this drives height and the viewBox decides
     the rest. Sized so the mark floats in the seat the way it does on the
     hardware rather than filling it. */
  --transport-glyph: 0.55rem;
  --menu-min: 11rem;
  --tile-min: 13rem;
  --tag-max: 9rem;
  --sheet-max: 32rem;
  --unit-max: 62rem;
}

@media (min-width: 45rem) {
  :root {
    --page-pad-top: 2rem;
    --page-gutter: 1.25rem;
    --page-pad-bottom: 5rem;
    --gap-seed: 1.75rem;
    --gap-data: 2.25rem;
    --gap-section: 3rem;
  }
}