/* DeployBot UI: the cascade layer order, the self-hosted fonts and the design tokens. No CSS
   framework. The CSP forbids inline styles, so every rule lives in these stylesheets and views
   only use classes: base.css, layout.css, components.css, pages.css and utilities.css, one layer
   each, linked in this order by layouts/_head.cfm. The theme follows the OS (color-scheme: light
   dark) unless html[data-theme] ("light" / "dark") is set by the top-bar toggle in
   includes/js/theme.js. */

@layer reset, tokens, base, layout, components, pages, utilities;

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

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

@layer tokens {
  /* Colours are light-dark( <light theme>, <dark theme> ), resolved against the color-scheme
     below: the OS preference, or the toggle's explicit choice. */
  :root {
    color-scheme: light dark;
    --bg: light-dark(oklch(0.965 0.006 85), oklch(0.145 0.006 265));
    --surface: light-dark(oklch(0.995 0.002 85), oklch(0.19 0.008 265));
    --raised: light-dark(oklch(0.955 0.006 85), oklch(0.23 0.008 265));
    --border: light-dark(oklch(0.89 0.008 85), oklch(0.30 0.014 255));
    --text: light-dark(oklch(0.21 0.014 255), oklch(0.94 0.008 255));
    --muted: light-dark(oklch(0.50 0.014 255), oklch(0.68 0.016 255));
    --faint: light-dark(oklch(0.72 0.012 255), oklch(0.48 0.016 255));
    /* Semantic colours double as text (status words, badge labels on their 16% tint), so the
       light theme keeps them dark enough for 4.5:1 on the surface and on the tint (measured in
       phase 13). --accent is the brand fill, the same amber in both themes (dark ink on it);
       --accent-text is the amber used for link text, darker in the light theme for contrast on
       the light surface. --focus is the focus ring: the fill is too light to see on a light
       page. */
    --accent: oklch(0.83 0.16 82);
    --accent-text: light-dark(oklch(0.50 0.14 58), oklch(0.83 0.16 82));
    --accent-ink: oklch(0.2 0.03 82);
    --focus: var(--accent-text);
    --ok: light-dark(oklch(0.45 0.14 152), oklch(0.78 0.17 152));
    --warn: light-dark(oklch(0.48 0.13 65), oklch(0.82 0.15 78));
    --fail: light-dark(oklch(0.48 0.2 26), oklch(0.72 0.19 24));
    --info: light-dark(oklch(0.48 0.13 240), oklch(0.78 0.12 232));
    --skip: light-dark(oklch(0.48 0.02 255), oklch(0.70 0.02 255));
    --prod: light-dark(oklch(0.50 0.17 350), oklch(0.78 0.14 350));
    /* text on a solid --warn / --fail fill (the confirm dialog's button): white on the light
       theme's dark semantic colours, dark on the dark theme's light ones */
    --fill-ink: light-dark(oklch(1 0 0), oklch(0.18 0.02 265));
    --shadow: 0 1px 2px rgba(20,20,40,.05), 0 8px 24px -16px rgba(20,20,40,.18);
    /* glass surfaces over the ambient artwork (components.css). --glass-bg is a gradient in the
       dark theme: always use it with background:, never background-color: */
    --glass-bg: color-mix(in oklch, var(--surface) 72%, transparent);
    --glass-bg-strong: light-dark(color-mix(in oklch, var(--surface) 82%, transparent), color-mix(in oklch, var(--surface) 80%, transparent)); /* top bar */
    --glass-border: light-dark(color-mix(in oklch, var(--text) 9%, transparent), color-mix(in oklch, var(--text) 8%, transparent));
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,.6);
    --glass-shadow: 0 1px 2px rgba(20,20,40,.05), 0 18px 40px -24px rgba(20,20,40,.25);
    --glass-blur: blur(20px) saturate(140%);
    --hover-fill: light-dark(color-mix(in oklch, var(--text) 4%, transparent), color-mix(in oklch, var(--text) 3%, transparent));
    --ambient-opacity: .22;
    --ambient-height: 760px;
    /* the floating top bar's height plus a gap: sticky elements and anchor jumps clear it */
    --sticky-offset: 82px;

    --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* every rule that sets --font-mono also turns its ligatures off (font-variant-ligatures: none;
       font-feature-settings: "calt" 0): JetBrains Mono draws "://" and "www" as ligatures, so a
       typed http://www looked like "https: /www" */
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* type scale: the body size (14px) and the sizes below it that the rules repeat; one-off
       sizes (headings, numerals) stay literal */
    --text-1: 11px;
    --text-2: 11.5px;
    --text-3: 12px;
    --text-4: 12.5px;
    --text-5: 13px;
    --text-6: 13.5px;
    --text-7: 14px;

    /* spacing scale for gap, margin and padding; a declaration uses it only when every one of
       its lengths is on the scale, otherwise it stays literal */
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 8px;
    --space-4: 10px;
    --space-5: 12px;
    --space-6: 14px;
    --space-7: 16px;
    --space-8: 20px;
    --space-9: 24px;

    --radius-sm: 6px;   /* tiny chips, log buttons */
    --radius-md: 8px;   /* nav items, small buttons */
    --radius-lg: 10px;  /* primary buttons, inputs (9px), inline panels */
    --radius-xl: 14px;  /* cards / sections */
    --radius-2xl: 16px; /* modal */
    --radius-pill: 999px;
  }

  :root[data-theme="light"] {
    color-scheme: light;
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
  }

  /* Dark values of the tokens light-dark() cannot switch: it takes colours only, and these are
     shadows, a gradient, a filter and plain numbers. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -12px rgba(0,0,0,.5);
      --glass-bg: linear-gradient(180deg, color-mix(in oklch, var(--text) 5%, transparent), color-mix(in oklch, var(--text) 1.5%, transparent));
      --glass-highlight: inset 0 1px 0 rgba(255,255,255,.06);
      --glass-shadow: 0 24px 60px -24px rgba(0,0,0,.7);
      --glass-blur: blur(24px) saturate(140%);
      --ambient-opacity: .5;
      --ambient-height: 900px;
    }
  }

  /* explicit choice from the toggle; keep in sync with the block above */
  :root[data-theme="dark"] {
    --shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -12px rgba(0,0,0,.5);
    --glass-bg: linear-gradient(180deg, color-mix(in oklch, var(--text) 5%, transparent), color-mix(in oklch, var(--text) 1.5%, transparent));
    --glass-highlight: inset 0 1px 0 rgba(255,255,255,.06);
    --glass-shadow: 0 24px 60px -24px rgba(0,0,0,.7);
    --glass-blur: blur(24px) saturate(140%);
    --ambient-opacity: .5;
    --ambient-height: 900px;
  }

  /* Tinted fills are always derived, never hard-coded:
     background: color-mix(in oklch, var(--ok) 16%, transparent); color: var(--ok);
     The tone families in components.css do this once, through --tone. */
}