/* pipesphere design tokens. Roles and rules: DESIGN.md.
   :host makes them work inside a shadow root, e.g. the in-page button. */

:root,
:host {
  /* Native parts (select lists, scrollbars) follow the dark mode too. */
  color-scheme: light dark;

  --ps-canvas: #FAFAFA;
  --ps-surface: #FFFFFF;
  --ps-sunken: #F4F4F5;
  /* Behind a site icon; light in dark mode too, like an app icon. */
  --ps-icon-tile: #F4F4F5;
  --ps-line: #E4E4E7;
  --ps-line-strong: #8A8A93;
  /* Hover. Translucent, so a hovered button on a hovered row still shows. */
  --ps-wash: rgb(24 24 27 / 0.035);
  --ps-wash-strong: rgb(24 24 27 / 0.07);

  --ps-ink: #18181B;
  --ps-ink-muted: #52525B;
  --ps-ink-faint: #696972;

  --ps-accent: #21706A;
  --ps-accent-hover: #1A5A55;
  --ps-accent-tint: #E7F1EF;
  --ps-on-accent: #FFFFFF;

  --ps-cut: #696972;
  --ps-meter: #71717A;

  --ps-caution: #A8671A;
  --ps-caution-ink: #7F4D0C;
  --ps-caution-tint: #FBF1E1;

  --ps-stop: #B3261E;
  --ps-stop-tint: #FBEAE8;

  --ps-shadow-float: 0 1px 2px rgb(24 24 27 / 0.04),
    0 8px 24px rgb(24 24 27 / 0.05);

  --ps-font-sans: "Geist", system-ui, -apple-system, "Segoe UI", Roboto,
    "Noto Sans", sans-serif;
  --ps-font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono",
    "Roboto Mono", monospace;
  /* In-page button only: web fonts do not load inside a shadow root. */
  --ps-font-page: system-ui, -apple-system, "Segoe UI", Roboto,
    "Noto Sans", sans-serif;
  --ps-font-page-mono: ui-monospace, "SF Mono", "Cascadia Mono",
    "Roboto Mono", monospace;

  --ps-text-sm: 0.875rem;
  --ps-text-sm-leading: 1.25rem;
  --ps-text-base: 1rem;
  --ps-text-base-leading: 1.5rem;
  --ps-text-lg: 1.125rem;
  --ps-text-lg-leading: 1.625rem;
  --ps-text-xl: 1.375rem;
  --ps-text-xl-leading: 1.75rem;
  --ps-text-2xl: 1.75rem;
  --ps-text-2xl-leading: 2.125rem;

  --ps-radius-sm: 4px;
  --ps-radius-md: 6px;
  --ps-radius-lg: 10px;

  /* The cut signal: dash, gap, stroke. SVG: stroke-dasharray="4 3". */
  --ps-dash: 4px;
  --ps-dash-gap: 3px;
  --ps-cut-width: 2px;

  --ps-ease: cubic-bezier(0.2, 0, 0, 1);
  --ps-duration-fast: 120ms;
  --ps-duration-base: 180ms;
}

@media (prefers-color-scheme: dark) {
  :root,
  :host {
    --ps-canvas: #121214;
    --ps-surface: #1B1B1F;
    --ps-sunken: #26262B;
    --ps-icon-tile: #D4D4D8;
    --ps-line: #313137;
    --ps-line-strong: #7C7C86;
    --ps-wash: rgb(244 244 245 / 0.04);
    --ps-wash-strong: rgb(244 244 245 / 0.08);

    --ps-ink: #F4F4F5;
    --ps-ink-muted: #B8B8C0;
    --ps-ink-faint: #9696A0;

    --ps-accent: #6DBDB2;
    --ps-accent-hover: #8ACCC3;
    --ps-accent-tint: #15312F;
    --ps-on-accent: #0E2422;

    --ps-cut: #9696A0;
    --ps-meter: #9696A0;

    --ps-caution: #D9A04A;
    --ps-caution-ink: #E9B96B;
    --ps-caution-tint: #3A2B12;

    --ps-stop: #EC8E86;
    --ps-stop-tint: #3E1D1B;

    --ps-shadow-float: 0 1px 2px rgb(9 9 11 / 0.40),
      0 8px 24px rgb(9 9 11 / 0.50);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root,
  :host {
    --ps-duration-fast: 0ms;
    --ps-duration-base: 0ms;
  }
}