/*
  XCP design tokens for the web.

  These are not new values. They are the control center's tokens, mirrored so
  the site and the application cannot drift into two different products that
  happen to share a name. `web/tools/check-design-tokens.ps1` compares this file
  against App.xaml and fails on any divergence, so the mirror is a gate rather
  than an intention.

  Three materials and nothing else: deep matte black, machined metal, and one
  luminous green. The black is neutral rather than blue, so it reads as a matte
  shell instead of a night sky. Green is spent, not spread -- it belongs in
  seams, edges and single primary actions, never as a filled area competing with
  the content. Amber and red are reserved strictly for trouble, so seeing either
  one means something.

  Source of truth:
  src/XComputeControlCenter/XComputeControlCenter/App.xaml
*/

:root {
  /* -- surfaces ---------------------------------------------------------- */
  --xcp-pane: #030404;
  --xcp-surface: #101213;
  --xcp-surface-raised: #181B1C;
  --xcp-surface-sunken: #0A0C0C;

  /* -- machined edges ----------------------------------------------------- */
  --xcp-hairline: #222628;
  --xcp-hairline-strong: #394043;
  --xcp-metal: #8B9397;
  --xcp-connector: #6E777B;

  /* -- the green ---------------------------------------------------------- */
  --xcp-accent: #35D435;
  --xcp-green-core: #1CAE1C;
  --xcp-green-brand: #107C10;
  --xcp-accent-dim: #12520F;
  --xcp-accent-wash: #0D1C0D;

  /* -- meaning ------------------------------------------------------------ */
  --xcp-positive: #35D435;
  --xcp-warn: #E0A63A;
  --xcp-danger: #E24B3C;

  /* -- text --------------------------------------------------------------- */
  --xcp-text: #ECEFEE;
  --xcp-text-secondary: #9AA2A1;
  --xcp-text-tertiary: #6B7372;

  /* -- composed surfaces --------------------------------------------------
     A machined part is lit on its top edge and dark at its base. Panels borrow
     that bevel so every surface reads as a piece of hardware rather than as a
     rectangle with a stroke around it. */
  --xcp-app-background: linear-gradient(160deg, #040505 0%, #0A0C0C 55%, #060707 100%);
  --xcp-bevel: linear-gradient(180deg, #3E4649 0%, #252B2D 35%, #191D1F 100%);
  --xcp-bevel-soft: linear-gradient(180deg, #2C3234 0%, #1B1F21 100%);
  --xcp-metal-surface: linear-gradient(180deg, #2A3033 0%, #1B1F21 100%);
  --xcp-chrome: linear-gradient(180deg, #F4F7F7 0%, #A9B2B6 42%, #E4EAEB 55%, #798387 100%);
  --xcp-rule: linear-gradient(90deg, transparent 0%, #707A7E 50%, transparent 100%);

  /* -- type ----------------------------------------------------------------
     The scale is the application's, converted from WinUI character spacing
     (thousandths of an em). Cascadia Mono rather than Cascadia Code: the two
     are the same typeface and differ only in that Code carries ligatures, which
     merge adjacent characters. On a hash that is a defect. Every fallback in
     the stack is monospaced, so a machine without Cascadia still lands on a
     face that keeps columns aligned. */
  --xcp-font-sans: system-ui, "Segoe UI Variable Display", "Segoe UI", -apple-system, sans-serif;
  --xcp-font-mono: "Cascadia Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --xcp-size-page: clamp(28px, 4.2vw, 44px);
  --xcp-size-section: clamp(21px, 2.8vw, 28px);
  --xcp-size-metric: clamp(26px, 3.4vw, 34px);
  --xcp-size-body: 16px;
  --xcp-size-key: 13.5px;
  --xcp-size-caption: 12.5px;
  --xcp-size-label: 10.5px;
  --xcp-size-mono: 12px;

  --xcp-track-page: -0.03em;
  --xcp-track-metric: -0.03em;
  --xcp-track-section: -0.025em;
  --xcp-track-label: 0.18em;

  /* -- rhythm ------------------------------------------------------------- */
  --xcp-radius: 10px;
  --xcp-radius-inner: 8px;
  --xcp-measure: 64ch;
  --xcp-gutter: clamp(20px, 5vw, 56px);
  --xcp-max: 1020px;
}