/* Copied from FishEye Go web/src/styles/tokens.css by tools/sync_brand.py. Do not edit here. */
/* Design tokens: every custom property. Components never hard-code a colour.

   Themes (ADR 0079 section 6). Bare :root is the light theme. The dark palette is written twice, because CSS has no way to share a
   block between a media query and an attribute: once for "System" when the system is dark (and the user has not forced light),
   once for an explicit Dark. tokens.test.ts fails if the two copies drift apart, and checks the contrast of every pair listed there. */
:root {
  /* Surfaces and ink */
  /* Light is off-white, not paper-white: a cool near-white page under slightly brighter panels, with darker ink than the brand
     charcoal so text reads crisply on it. */
  --paper: #f2f3f5;
  --surface: #fbfbfc;
  --surface-2: #f0f1f3;
  --ink: #161c24;
  --slate: #5a6068;
  /* Three tiers of text. 1 is what you read, 2 is secondary (5.3:1 or more on every surface), 3 is only for what you need not read:
     placeholders, separators, disabled (about 3.5:1). Nothing is dimmed with opacity. */
  --text-1: var(--ink);
  --text-2: var(--slate);
  --text-3: #7c828a;
  --rule: #e3e5e8;
  --rule-firm: #c2c6cc;
  /* Borders a person has to see to use the control (text fields, selects, graph lines): at least 3:1 on every surface. */
  --input-border: #80858d;
  --graph-edge: #80858d;
  --accent: #bf4609;
  --brand: #fe6301;
  --on-accent: #222c37;
  /* Disabled controls are drawn as such (a flat, quiet fill) rather than faded with opacity. */
  --disabled-bg: #ececea;
  --disabled-ink: #6b717a;
  --disabled-border: #d9d9d5;
  /* The charcoal brand bar keeps its colour in both themes, so its status colours are their own. */
  --chrome: #222c37;
  --chrome-ink: #ffffff;
  --chrome-muted: #b4b8be;
  --chrome-accent: #fe6301;
  --chrome-link: #ff8540;
  --chrome-ok: #6fd3a0;
  --chrome-warn: #f2c14e;
  --chrome-bad: #ff8a9c;
  --chrome-info: #8fb8ff;
  /* Translucent layers for the top bar and sidebar (materials), and the solid colour they fall back to under
     prefers-reduced-transparency and prefers-contrast: more (see Layout.css). */
  --material-topbar: rgba(34, 44, 55, 0.92);
  --material-sidebar: rgba(251, 251, 252, 0.72);
  --material-sidebar-solid: #fbfbfc;
  --topbar-h: 3.25rem;
  --material-blur: 20px;
  --material-saturate: 180%;
  /* Status colours are saturated in light, so a red or amber row stands out on the pale page; each keeps 4.5:1 on every surface. */
  --ok: #0f7d45;
  --warn: #906000;
  --bad: #cf0f2e;
  --info: #1659c4;
  /* The status colours as fills and marks (a solid chip, an edge, a bar) and the text on a fill. In light they are the status
     colours themselves with white text; dark has its own, halfway between a pastel and the full light-theme hue, with dark text. */
  --ok-fill: #0f7d45;
  --warn-fill: #906000;
  --bad-fill: #cf0f2e;
  --info-fill: #1659c4;
  --on-fill: #fff;
  --c0: #fe6301;
  --c1: #2563a8;
  --c2: #2b7a4b;
  --c3: #7a4fa0;
  --scrim: rgba(0, 0, 0, 0.45);
  --shadow-ink: rgba(16, 24, 32, 0.12);
  /* Materials: three levels, one depth cue each (the calm redo, plan section 3). L0 is the page: flat. L1 is content (panels, tables,
     tiles, cards): solid, and the cue is one soft ring of shadow in light, or one hairline border in dark (--panel-border; the shadow
     is none there). With more contrast the ring stays and the border is the firm rule. No inner highlight, no second shadow, no
     title-bar rule, nothing that follows the cursor. L2 is what floats over content (menus, popovers, the search, dialogs, toasts,
     the side panel): glass, a hairline and --shadow-float. Glass never sits on glass: a popover opened from the side panel is solid. */
  --shadow-ink-soft: rgba(30, 42, 58, 0.07);
  --panel-shadow: 0 0 0 1px rgba(22, 28, 36, 0.07), 0 1px 2px rgba(22, 28, 36, 0.05);
  --panel-border: transparent;
  --shadow-sm: var(--panel-shadow);
  --shadow-lift: var(--panel-shadow);
  --shadow-float: var(--shadow-3);
  --glass: color-mix(in srgb, var(--surface) 86%, transparent);
  --glass-large: color-mix(in srgb, var(--surface) 80%, transparent);
  --glass-filter: blur(16px) saturate(160%);
  --glass-filter-large: blur(28px) saturate(160%);
  /* The focus ring: koi orange, 3:1 or more on every surface (the brand orange itself is 2.9:1 on the light page, so the ring is a
     shade deeper there; in dark it is the brand orange). */
  --focus-ring: #e05206;
  /* Translucent fills for rows and nav items, so hover and "you are here" work on any surface. */
  --hover: rgba(34, 44, 55, 0.045);
  --selected: rgba(34, 44, 55, 0.07);
  /* A field sits a little below the surface it is on. */
  --field: #fdfdfd;

  /* Type scale (rem, so it follows the user's text size). Size, leading and tracking travel together:
     large text is set tighter, small text a little looser, body copy near zero (apple-design 15). */
  /* Seven steps, and nothing a person reads is smaller than caption (13 px): caption 13 (chips, times, ticks, column headers),
     body 15, headline 17 (panel and dialog titles), title 22 (section heads), large 28 (the page title), figure 32 (stat values),
     display 40 (hero counts). */
  --text-sm: 0.8125rem;
  --text-md: 0.9375rem;
  --text-lg: 1.0625rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --leading-sm: 1.385;
  --leading-md: 1.467;
  --leading-lg: 1.41;
  --leading-xl: 1.27;
  --leading-2xl: 1.214;
  --leading-3xl: 1.125;
  --leading-4xl: 1.1;
  --tracking-sm: 0.01em;
  --tracking-md: 0;
  --tracking-lg: -0.01em;
  --tracking-xl: -0.016em;
  --tracking-2xl: -0.022em;
  --tracking-3xl: -0.028em;
  --tracking-4xl: -0.036em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  /* The one label style (table headers, definition terms, sidebar groups, h3): caption size, sentence case, the system face at medium
     weight in secondary text. Never uppercase, never mono: mono is for identifiers only (addresses, hostnames, OIDs, serials). */
  --label-font: var(--sans);
  --label-size: var(--text-sm);
  --label-tracking: 0.01em;
  --label-weight: var(--weight-medium);
  --mono-scale: 0.92em;

  /* Spacing: a 4 px scale. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 3rem;
  /* Gutters follow the screen: the page's side margin and a panel's padding grow from a phone to a wall screen. Rows are 44 px
     comfortable, 32 px compact. */
  --gutter: clamp(1rem, 0.4rem + 2.2vw, 2.5rem);
  --pad-panel: clamp(1rem, 0.6rem + 1vw, 1.5rem);
  --row-h: 2.75rem;
  --row-h-compact: 2rem;

  /* Corners nest: outer = inner + padding. Containers (panels, dialogs, popovers, the search palette) 12, tiles inside a panel 10,
     controls (buttons, fields, nav rows, menu items) 8, chips the pill, small marks (kbd, checkbox) 4, bars and ticks 2. Sheets that
     touch a screen edge have no radius on that edge. */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --radius-mark: 2px;

  /* Elevation: raised surfaces, menus and popovers, dialogs. Colour comes from --shadow-ink per theme. */
  --shadow-1: 0 1px 2px var(--shadow-ink);
  --shadow-2: 0 4px 12px var(--shadow-ink), 0 1px 3px var(--shadow-ink);
  --shadow-3: 0 12px 32px var(--shadow-ink), 0 2px 6px var(--shadow-ink);

  /* Motion for CSS transitions. Springs live in lib/motion.ts; these cover press and fade. */
  --dur-press: 100ms;
  --dur-fade: 180ms;
  --dur-theme: 200ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* System faces only (no font files, ADR 0079). The optical cuts come first where the system has them: Segoe UI Variable on
     Windows 11 (Text for running text, Display for titles), SF on Apple systems through -apple-system. */
  --sans: 'Segoe UI Variable Text', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: 'Segoe UI Variable Display', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace;
  /* Native checkboxes, radios, range sliders and progress bars take the accent instead of the browser's blue. */
  accent-color: var(--accent);
  color-scheme: light;
}

/* Dark, for System when the system is dark. Keep identical to the :root[data-theme='dark'] block below. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #13171c;
    --surface: #1c2128;
    --surface-2: #262c35;
    --ink: #f4f4f3;
    --slate: #9aa0a8;
    --text-3: #7b828c;
    --rule: #2f3640;
    --rule-firm: #454d59;
    --input-border: #7a8799;
    --graph-edge: #7a8799;
    --accent: #fe6301;
    --brand: #fe6301;
    --on-accent: #222c37;
    --disabled-bg: #2a3340;
    --disabled-ink: #98a1ad;
    --disabled-border: #3a4554;
    --chrome: #0c0f13;
    --chrome-ink: #f4f4f3;
    --chrome-muted: #b4b8be;
    --chrome-accent: #fe6301;
    --chrome-link: #ff8540;
    --chrome-ok: #6fd3a0;
    --chrome-warn: #f2c14e;
    --chrome-bad: #ff8a9c;
    --chrome-info: #8fb8ff;
    --material-sidebar: rgba(19, 23, 28, 0.6);
    --material-sidebar-solid: #13171c;
    --material-topbar: rgba(12, 15, 19, 0.86);
    --ok: #32b66f;
    --warn: #edae32;
    --bad: #ff5976;
    --info: #5e9dff;
    --ok-fill: #309f67;
    --warn-fill: #ba8b2a;
    --bad-fill: #ec445d;
    --info-fill: #4481e2;
    --on-fill: #14181d;
    --c0: #fe6301;
    --c1: #6fa8ff;
    --c2: #4cc38a;
    --c3: #c39be6;
    --scrim: rgba(0, 0, 0, 0.6);
    --shadow-ink: rgba(0, 0, 0, 0.5);
    --shadow-ink-soft: rgba(0, 0, 0, 0.3);
    --focus-ring: #fe6301;
    --panel-shadow: 0 0 0 0 transparent;
    --panel-border: var(--rule);
    --shadow-sm: var(--panel-shadow);
    --shadow-lift: var(--panel-shadow);
    --shadow-float: var(--shadow-3);
    --hover: rgba(255, 255, 255, 0.045);
    --selected: rgba(255, 255, 255, 0.075);
    --field: #161a20;
    color-scheme: dark;
  }
}

/* Dark, chosen explicitly. */
:root[data-theme='dark'] {
  --paper: #13171c;
  --surface: #1c2128;
  --surface-2: #262c35;
  --ink: #f4f4f3;
  --slate: #9aa0a8;
  --text-3: #7b828c;
  --rule: #2f3640;
  --rule-firm: #454d59;
  --input-border: #7a8799;
  --graph-edge: #7a8799;
  --accent: #fe6301;
  --brand: #fe6301;
  --on-accent: #222c37;
  --disabled-bg: #2a3340;
  --disabled-ink: #98a1ad;
  --disabled-border: #3a4554;
  --chrome: #0c0f13;
  --chrome-ink: #f4f4f3;
  --chrome-muted: #b4b8be;
  --chrome-accent: #fe6301;
  --chrome-link: #ff8540;
  --chrome-ok: #6fd3a0;
  --chrome-warn: #f2c14e;
  --chrome-bad: #ff8a9c;
  --chrome-info: #8fb8ff;
  --material-sidebar: rgba(19, 23, 28, 0.6);
  --material-sidebar-solid: #13171c;
  --material-topbar: rgba(12, 15, 19, 0.86);
  --ok: #32b66f;
  --warn: #edae32;
  --bad: #ff5976;
  --info: #5e9dff;
  --ok-fill: #309f67;
  --warn-fill: #ba8b2a;
  --bad-fill: #ec445d;
  --info-fill: #4481e2;
  --on-fill: #14181d;
  --c0: #fe6301;
  --c1: #6fa8ff;
  --c2: #4cc38a;
  --c3: #c39be6;
  --scrim: rgba(0, 0, 0, 0.6);
  --shadow-ink: rgba(0, 0, 0, 0.5);
  --shadow-ink-soft: rgba(0, 0, 0, 0.3);
  --focus-ring: #fe6301;
  --panel-shadow: 0 0 0 0 transparent;
  --panel-border: var(--rule);
  --shadow-sm: var(--panel-shadow);
  --shadow-lift: var(--panel-shadow);
  --shadow-float: var(--shadow-3);
  --hover: rgba(255, 255, 255, 0.045);
  --selected: rgba(255, 255, 255, 0.075);
  --field: #161a20;
  color-scheme: dark;
}

/* prefers-contrast: more firms up borders and secondary text. Same shape as above: light, dark for System, dark chosen. */
@media (prefers-contrast: more) {
  :root {
    --rule: #a9a9a4;
    --rule-firm: #6b6f76;
    --input-border: #565b63;
    --graph-edge: #565b63;
    --slate: #4f535a;
    --disabled-border: #a9a9a4;
    --panel-border: var(--rule-firm);
  }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --rule: #6b7a8f;
    --rule-firm: #8e9bb0;
    --input-border: #a5b0c2;
    --graph-edge: #a5b0c2;
    --slate: #b9c0ca;
    --disabled-border: #6b7a8f;
    --panel-border: var(--rule-firm);
  }
}
@media (prefers-contrast: more) {
  :root[data-theme='dark'] {
    --rule: #6b7a8f;
    --rule-firm: #8e9bb0;
    --input-border: #a5b0c2;
    --graph-edge: #a5b0c2;
    --slate: #b9c0ca;
    --disabled-border: #6b7a8f;
    --panel-border: var(--rule-firm);
  }
}