/* Design tokens. The only stylesheet that may contain raw colours, font names,
   pixel values and @font-face; a static test enforces that every other
   stylesheet refers to these variables instead. Three colour layers give a
   flash-free theme: :root holds the light theme, the media query applies the
   dark theme when the system asks for it (unless the user forced light), and
   the data-theme rule lets an explicit cookie override the system. The two dark
   blocks carry identical values.

   Figtree (UI), Bricolage Grotesque (titles and key figures) and IBM Plex Mono
   (machine values) are shipped from this server as WOFF2, each licensed under
   the SIL Open Font License 1.1 (see ../fonts/OFL-Figtree.txt,
   ../fonts/OFL-BricolageGrotesque.txt and ../fonts/OFL.txt, updated per
   ../fonts/UPDATE.md). The url() paths are relative so the app works under a
   reverse-proxy sub-path without rewriting. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Figtree-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Figtree-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Figtree-SemiBold.woff2") format("woff2");
}

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Figtree-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/BricolageGrotesque-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/BricolageGrotesque-ExtraBold.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
}

:root {
  /* Typography */
  --font-ui: "Figtree", system-ui, "Segoe UI", sans-serif;
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.9375rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

  --leading-tight: 1.25;
  --leading-normal: 1.45;

  /* Spacing */
  --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;

  /* Radii and borders */
  --radius-sm: 0.75rem;
  --radius-md: 1.5rem;
  --radius-full: 999px;
  --border-width: 1px;

  /* Panels */
  --panel-handle-size: 0.5rem;

  /* Focus */
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;

  /* Motion */
  --motion-fast: 150ms;
  --motion-slow: 300ms;

  /* Colours (light) */
  --color-bg: #fbfaf7;
  --color-surface: #ffffff;
  --color-surface-sunken: #f2f0ea;
  --color-text: #1c1a14;
  --color-text-muted: #5b5a52;
  --color-border: #ece9e1;
  --color-border-strong: #8a877c;
  --color-primary: #1f4e8c;
  --color-on-primary: #ffffff;
  --color-focus: #1f4e8c;
  --color-header-bg: #1f4e8c;
  --color-header-text: #ffffff;
  --color-header-focus: #ffc83d;
  --color-header-nav: #173d6e;
  --color-nav-active: #e4eefa;
  --color-sun: #ffc83d;

  /* Status colours (text / background) */
  --color-success-text: #177245;
  --color-success-bg: #e3f4ee;
  --color-warning-text: #9a5b00;
  --color-warning-bg: #fff1cc;
  --color-danger-text: #b3261e;
  --color-danger-bg: #fde6e2;
  --color-info-text: #1f4e8c;
  --color-info-bg: #e4eefa;
  --color-production-text: #a14a00;
  --color-production-bg: #fdefe4;

  /* Run states on the gantt plot, plus the now line (M1-6) and the arrows of the flow (M7-7) */
  --color-status-running: #1f4e8c;
  --color-status-succeeded: #177245;
  --color-status-warning: #c07a00;
  --color-status-failed: #b3261e;
  --color-status-stopped: #6b6960;
  --color-status-unaccounted: #7a3fd1;
  --color-status-unknown: #8a877c;
  --color-gantt-now: #1c1a14;
  --color-gantt-arrow: #5b5a52;
  --color-gantt-arrow-error: #8f1f19;
  --color-log-hit-bg: #ffe08a;
  --color-backdrop: #1c1a1499;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0f1520;
    --color-surface: #182130;
    --color-surface-sunken: #1d2635;
    --color-text: #eef2f7;
    --color-text-muted: #a8b3c2;
    --color-border: #26303f;
    --color-border-strong: #6f7b8c;
    --color-primary: #7fb0ff;
    --color-on-primary: #0f1520;
    --color-focus: #7fb0ff;
    --color-header-bg: #141c2a;
    --color-header-text: #eef2f7;
    --color-header-focus: #ffd166;
    --color-header-nav: #1d2a3c;
    --color-nav-active: #1d2d47;
    --color-sun: #ffd166;

    --color-success-text: #5fd3ad;
    --color-success-bg: #12281f;
    --color-warning-text: #ffd166;
    --color-warning-bg: #2a2412;
    --color-danger-text: #ff8f80;
    --color-danger-bg: #2d1614;
    --color-info-text: #7fb0ff;
    --color-info-bg: #1d2d47;
    --color-production-text: #f5a86a;
    --color-production-bg: #2e1b0c;

    --color-status-running: #7fb0ff;
    --color-status-succeeded: #5fd3ad;
    --color-status-warning: #ffd166;
    --color-status-failed: #ff8f80;
    --color-status-stopped: #a8b3c2;
    --color-status-unaccounted: #c3a6ff;
    --color-status-unknown: #6f7b8c;
    --color-gantt-now: #eef2f7;
    --color-gantt-arrow: #b8c4cf;
    --color-gantt-arrow-error: #ffb4ab;
    --color-log-hit-bg: #5a4710;
    --color-backdrop: #000000b3;
  }
}

:root[data-theme="dark"] {
  --color-bg: #0f1520;
  --color-surface: #182130;
  --color-surface-sunken: #1d2635;
  --color-text: #eef2f7;
  --color-text-muted: #a8b3c2;
  --color-border: #26303f;
  --color-border-strong: #6f7b8c;
  --color-primary: #7fb0ff;
  --color-on-primary: #0f1520;
  --color-focus: #7fb0ff;
  --color-header-bg: #141c2a;
  --color-header-text: #eef2f7;
  --color-header-focus: #ffd166;
  --color-header-nav: #1d2a3c;
  --color-nav-active: #1d2d47;
  --color-sun: #ffd166;

  --color-success-text: #5fd3ad;
  --color-success-bg: #12281f;
  --color-warning-text: #ffd166;
  --color-warning-bg: #2a2412;
  --color-danger-text: #ff8f80;
  --color-danger-bg: #2d1614;
  --color-info-text: #7fb0ff;
  --color-info-bg: #1d2d47;
  --color-production-text: #f5a86a;
  --color-production-bg: #2e1b0c;

  --color-status-running: #7fb0ff;
  --color-status-succeeded: #5fd3ad;
  --color-status-warning: #ffd166;
  --color-status-failed: #ff8f80;
  --color-status-stopped: #a8b3c2;
  --color-status-unaccounted: #c3a6ff;
  --color-status-unknown: #6f7b8c;
  --color-gantt-now: #eef2f7;
  --color-gantt-arrow: #b8c4cf;
  --color-gantt-arrow-error: #ffb4ab;
  --color-log-hit-bg: #5a4710;
  --color-backdrop: #000000b3;
}