/*
 * Tokens shared by the private dashboard and the public blog. The values are the Worksi public site's,
 * "Precision Instrument, ink and one signal" (docs/design/website-design-system.md §3,
 * apps/web/src/app/(marketing)/marketing.css). Change them there first.
 *
 * Theme: the operating system decides unless <html data-theme="light|dark"> was rendered by the server, so an explicit
 * choice wins without a line of inline script. The signal is never an error colour and never a fill for a button.
 */

@font-face {
  font-family: "Geist";
  src: url("../fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* surfaces: page < raised; sunken for wells */
  --mk-bg: oklch(0.987 0.002 95);
  --mk-raised: oklch(1 0 0);
  --mk-sunken: oklch(0.968 0.0025 95);
  --mk-well: oklch(0.968 0.0025 95);
  /* ink ramp */
  --mk-ink: oklch(0.185 0.004 95);
  --mk-ink-2: oklch(0.44 0.006 95);
  --mk-ink-3: oklch(0.53 0.006 95);
  /* lines */
  --mk-line: oklch(0.905 0.003 95);
  --mk-line-2: oklch(0.83 0.004 95);
  --mk-control: oklch(0.64 0.005 95);
  /* the one signal: only what is live or has changed */
  --mk-signal: oklch(0.645 0.19 41);
  --mk-signal-ink: oklch(0.535 0.165 39);
  --mk-signal-soft: oklch(0.962 0.024 55);
  --mk-ok: oklch(0.56 0.12 155);
  /* buttons */
  --mk-btn: var(--mk-ink);
  --mk-btn-fg: var(--mk-bg);
  --mk-btn-hover: oklch(0.32 0.004 95);
  /* shadows: neutral, never brand-tinted */
  --mk-shadow-popover: 0 12px 32px -12px oklch(0.2 0.01 95 / 0.22), 0 0 0 1px var(--mk-line);
  /* status tones: the console's values, for state only */
  --warning: oklch(0.72 0.17 65);
  --warning-soft: oklch(0.97 0.04 85);
  --warning-ink: oklch(0.5 0.13 55);
  --danger: oklch(0.6 0.22 25);
  --danger-soft: oklch(0.965 0.025 20);
  --danger-ink: oklch(0.5 0.19 25);
  /* the logo's own colours; the mark's orange never follows the site's signal */
  --mark-ink: #06090b;
  --mark-orange: #f05a28;

  /* motion */
  --t-instant: 90ms;
  --t-fast: 160ms;
  --t-base: 240ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* type scale, in rem so the reader's text size is respected */
  --fs-caption: 0.8125rem;
  --fs-small: 0.875rem;
  --fs-body-sm: 0.9375rem;
  --fs-body: 1rem;
  --fs-marker: 0.75rem;
  --fs-kicker: 0.78125rem;
}

/* Dark: a designed surface ramp, page < raised. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mk-bg: oklch(0.155 0.0025 95);
    --mk-raised: oklch(0.19 0.003 95);
    --mk-sunken: oklch(0.13 0.002 95);
    --mk-well: oklch(0.235 0.003 95);
    --mk-ink: oklch(0.955 0.002 95);
    --mk-ink-2: oklch(0.77 0.004 95);
    --mk-ink-3: oklch(0.665 0.004 95);
    --mk-line: oklch(0.27 0.003 95);
    --mk-line-2: oklch(0.35 0.004 95);
    --mk-control: oklch(0.5 0.004 95);
    --mk-signal: oklch(0.705 0.175 45);
    --mk-signal-ink: oklch(0.77 0.14 52);
    --mk-signal-soft: oklch(0.255 0.045 45);
    --mk-ok: oklch(0.72 0.14 155);
    --mk-btn: var(--mk-ink);
    --mk-btn-fg: var(--mk-bg);
    --mk-btn-hover: oklch(0.86 0.003 95);
    --mk-shadow-popover: 0 16px 40px -12px oklch(0 0 0 / 0.7), 0 0 0 1px var(--mk-line-2);
    --warning: oklch(0.78 0.16 72);
    --warning-soft: oklch(0.78 0.16 72 / 14%);
    --warning-ink: oklch(0.85 0.13 80);
    --danger: oklch(0.66 0.2 22);
    --danger-soft: oklch(0.66 0.2 22 / 15%);
    --danger-ink: oklch(0.78 0.14 22);
    --mark-ink: #e6e7e8;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --mk-bg: oklch(0.155 0.0025 95);
  --mk-raised: oklch(0.19 0.003 95);
  --mk-sunken: oklch(0.13 0.002 95);
  --mk-well: oklch(0.235 0.003 95);
  --mk-ink: oklch(0.955 0.002 95);
  --mk-ink-2: oklch(0.77 0.004 95);
  --mk-ink-3: oklch(0.665 0.004 95);
  --mk-line: oklch(0.27 0.003 95);
  --mk-line-2: oklch(0.35 0.004 95);
  --mk-control: oklch(0.5 0.004 95);
  --mk-signal: oklch(0.705 0.175 45);
  --mk-signal-ink: oklch(0.77 0.14 52);
  --mk-signal-soft: oklch(0.255 0.045 45);
  --mk-ok: oklch(0.72 0.14 155);
  --mk-btn: var(--mk-ink);
  --mk-btn-fg: var(--mk-bg);
  --mk-btn-hover: oklch(0.86 0.003 95);
  --mk-shadow-popover: 0 16px 40px -12px oklch(0 0 0 / 0.7), 0 0 0 1px var(--mk-line-2);
  --warning: oklch(0.78 0.16 72);
  --warning-soft: oklch(0.78 0.16 72 / 14%);
  --warning-ink: oklch(0.85 0.13 80);
  --danger: oklch(0.66 0.2 22);
  --danger-soft: oklch(0.66 0.2 22 / 15%);
  --danger-ink: oklch(0.78 0.14 22);
  --mark-ink: #e6e7e8;
}

/* ------------------------------------------------------------------------------------------------ base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--mk-bg);
  color: var(--mk-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  line-height: 1.55;
  /* Geist ss05: a serifed capital I, so "AI" never reads as "Al". */
  font-feature-settings: "ss05" 1;
  overflow-wrap: break-word;
}

:is(code, kbd, samp, pre, .mono) {
  font-family: var(--font-mono);
  font-feature-settings: normal;
}

:is(h1, h2, h3, h4) {
  margin: 0;
  text-wrap: balance;
}

:is(p, li, dd, td, figcaption, summary) {
  text-wrap: pretty;
}

p {
  margin: 0;
}

/* One focus rule: instant, 2 px signal ink, following each element's own radius. */
:focus-visible {
  outline: 2px solid var(--mk-signal-ink);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 80;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--mk-btn);
  color: var(--mk-btn-fg);
  font-weight: 500;
}

.skip-link:focus {
  top: 8px;
}

.mark-ink {
  fill: var(--mark-ink);
}

.mark-orange {
  fill: var(--mark-orange);
}

@media (forced-colors: active) {
  .mark-ink,
  .mark-orange {
    fill: currentcolor;
  }
}