/*
 * Kiln's look on the web (docs/web-plan.md, Look): the Mac app's Original theme (Kiln/UI/Theme.swift), as custom
 * properties in light and dark. Deep navy, and jade as the one accent, the colour of the thing to press and of what's
 * done. Amber means it's your turn, red a disagreement or a rule from outside the business to check, and a quiet blue
 * the analyst or a developer at work, so colour always says something.
 *
 * The page follows the system's appearance unless someone picks Light or Dark in Settings, which sets data-theme on
 * <html>. This file holds the tokens and the plain elements; each area has its own file beside it (layout, sidebar,
 * components, buttons, forms, chat, spec, checklist, product, feature, home, settings, sign_in, outbox), loaded after
 * this one in alphabetical order.
 */
:root {
  --ink: #0E1523;
  --ink-soft: #4E5B74;
  --ink-faint: #8A98AE;
  --paper: #F8F8F5;
  --canvas: #EEF1F6;
  --card: #FFFFFF;
  --inset: #F1F3F7;
  --rule: #D6DDE9;
  --accent: #3E8373;
  --accent-deep: #2F6A5D;
  --accent-text: #2F6A5D;
  --on-accent: #FFFFFF;
  --pass: #2F7D68;
  --wait: #A8732A;
  --wait-text: #85591C;
  --on-wait: #FFFFFF;
  --alert: #B24A4A;
  --info: #4E6E96;
  --navy: #0E1523;
  --on-navy: #F8F8F5;
  --shadow: 0 1px 3px rgb(14 21 35 / 0.06);
  --shadow-raised: 0 6px 20px rgb(14 21 35 / 0.08);
  --focus: #3E8373;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --radius: 12px;
  --radius-small: 8px;
  --sidebar-width: 272px;

  color-scheme: light;
}

/* The system's dark appearance, unless Settings says Light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E6EAF1;
    --ink-soft: #8A98AE;
    --ink-faint: #56647C;
    --paper: #0B111D;
    --canvas: #070C16;
    --card: #111A2A;
    --inset: #172234;
    --rule: #22304A;
    --accent: #6FB5A1;
    --accent-deep: #3E8373;
    --accent-text: #6FB5A1;
    --on-accent: #06110E;
    --pass: #5AA68F;
    --wait: #D9A56B;
    --wait-text: #D9A56B;
    --on-wait: #1A1206;
    --alert: #C76B6B;
    --info: #7A95B5;
    --navy: #070C16;
    --on-navy: #E6EAF1;
    --shadow: 0 1px 3px rgb(0 0 0 / 0.3);
    --shadow-raised: 0 8px 24px rgb(0 0 0 / 0.4);
    --focus: #6FB5A1;
    color-scheme: dark;
  }
}

/* Dark, picked in Settings, whatever the system says. */
:root[data-theme="dark"] {
  --ink: #E6EAF1;
  --ink-soft: #8A98AE;
  --ink-faint: #56647C;
  --paper: #0B111D;
  --canvas: #070C16;
  --card: #111A2A;
  --inset: #172234;
  --rule: #22304A;
  --accent: #6FB5A1;
  --accent-deep: #3E8373;
  --accent-text: #6FB5A1;
  --on-accent: #06110E;
  --pass: #5AA68F;
  --wait: #D9A56B;
  --wait-text: #D9A56B;
  --on-wait: #1A1206;
  --alert: #C76B6B;
  --info: #7A95B5;
  --navy: #070C16;
  --on-navy: #E6EAF1;
  --shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  --shadow-raised: 0 8px 24px rgb(0 0 0 / 0.4);
  --focus: #6FB5A1;
  color-scheme: dark;
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 var(--font);
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; color: var(--ink); }
h1 { font-size: 26px; letter-spacing: -0.01em; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { max-width: 100%; }

a { color: var(--accent-text); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
main:focus, main:focus-visible { outline: none; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: var(--radius-small); background: var(--card); color: var(--ink); box-shadow: var(--shadow-raised); }
.skip-link:focus { left: 8px; }

/* Text */
.muted { color: var(--ink-soft); }
.small { font-size: 13px; }
.mono { font-family: var(--font-mono); font-size: 0.92em; }
.wrap { overflow-wrap: anywhere; }
.nowrap { white-space: nowrap; }

/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

/* An icon (IconsHelper) is the size of the text beside it unless its place says otherwise. */
.icon { width: 1em; height: 1em; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}