/* Generated by tools/gen-tokens.mjs from the presentation-system block of
 * spec/ribosome-v0.umsg. Do not edit; edit that document and re-run.
 *
 * Editing a value here is undone by the next build, which is the intended
 * behaviour: it makes "the document is the source" fail loudly rather than
 * quietly stop being true. */

:root {
  color-scheme: light dark;

  /* roles */
  --fg: #17181a;
  --fg-soft: #45484d;
  --dim: #71757c;
  --line: #e4e5e8;
  --line-strong: #cfd1d6;
  --bg: #ffffff;
  --panel: #f7f8f9;
  --raised: #ffffff;
  --accent: #1155d6;
  --accent-soft: #eaf0fd;
  --err: #b3261e;
  --err-soft: #fdeceb;

  /* the construct legend, which belongs to the format */
  --c-key: #0e7490;
  --c-string: #a16207;
  --c-symbol: #6d28d9;
  --c-extension: #6d28d9;
  --c-identifier: #0e7490;
  --c-bytes: #15803d;
  --c-number: #17181a;
  --c-timestamp: #17181a;
  --c-comment: #71757c;
  --c-inferred: #7c3aed;

  /* radius */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* layout */
  --sidebar-w: 228px;
  --appbar-h: 56px;
  --gutter: 20px;

  --shadow: 0 1px 2px rgb(16 18 20 / 5%), 0 4px 12px rgb(16 18 20 / 4%);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
  --narrow: 768px;

  /* typography — :system is resolved by the host, which is what a stack is */
  --face-body: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --face-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --size-base: 15px;
  --line-base: 1.6;
  --measure: 68ch;
  --page: 96rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e9eaec;
    --fg-soft: #b8bbc0;
    --dim: #878b92;
    --line: #2a2c30;
    --line-strong: #3a3d43;
    --bg: #121316;
    --panel: #191b1f;
    --raised: #1d1f23;
    --accent: #7fa9ff;
    --accent-soft: #1a2540;
    --err: #f2b8b5;
    --err-soft: #3a1f1e;
    --c-key: #5fd7e8;
    --c-string: #e8b45f;
    --c-symbol: #9d8ff0;
    --c-extension: #9d8ff0;
    --c-identifier: #5fd7e8;
    --c-bytes: #7fd88a;
    --c-number: #c8d3e0;
    --c-timestamp: #c8d3e0;
    --c-comment: #7d8a9b;
    --c-inferred: #b9a8ff;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 14px rgb(0 0 0 / 25%);
  }
}

/* An explicit choice, which has to beat the system preference in BOTH
 * directions — including asking for light on a machine set to dark. That is
 * specificity rather than order: `:root[data-theme]` outranks the bare
 * `:root` inside the media query, so neither block needs to know about the
 * other and no value is written twice from a different source.
 *
 * Same declared values as above. A theme switch that introduced a colour
 * would be a second palette wearing the first one's name. */
:root[data-theme="light"] {
  color-scheme: light;
  --fg: #17181a;
  --fg-soft: #45484d;
  --dim: #71757c;
  --line: #e4e5e8;
  --line-strong: #cfd1d6;
  --bg: #ffffff;
  --panel: #f7f8f9;
  --raised: #ffffff;
  --accent: #1155d6;
  --accent-soft: #eaf0fd;
  --err: #b3261e;
  --err-soft: #fdeceb;
  --c-key: #0e7490;
  --c-string: #a16207;
  --c-symbol: #6d28d9;
  --c-extension: #6d28d9;
  --c-identifier: #0e7490;
  --c-bytes: #15803d;
  --c-number: #17181a;
  --c-timestamp: #17181a;
  --c-comment: #71757c;
  --c-inferred: #7c3aed;
  --shadow: 0 1px 2px rgb(16 18 20 / 5%), 0 4px 12px rgb(16 18 20 / 4%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fg: #e9eaec;
  --fg-soft: #b8bbc0;
  --dim: #878b92;
  --line: #2a2c30;
  --line-strong: #3a3d43;
  --bg: #121316;
  --panel: #191b1f;
  --raised: #1d1f23;
  --accent: #7fa9ff;
  --accent-soft: #1a2540;
  --err: #f2b8b5;
  --err-soft: #3a1f1e;
  --c-key: #5fd7e8;
  --c-string: #e8b45f;
  --c-symbol: #9d8ff0;
  --c-extension: #9d8ff0;
  --c-identifier: #5fd7e8;
  --c-bytes: #7fd88a;
  --c-number: #c8d3e0;
  --c-timestamp: #c8d3e0;
  --c-comment: #7d8a9b;
  --c-inferred: #b9a8ff;
  --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 4px 14px rgb(0 0 0 / 25%);
}

/* The shell breakpoint. Generated because presentation-system declares it,
 * and a media query is the one place a token cannot be referenced. */
@media (max-width: 767px) {
  .rail { display: none; }
  .appbar .wordmark small { display: none; }
}