/* TraceOS marketing site — Calm design system (docs/design/calm-tokens.md).
   Token layer: role-named CSS custom properties under html[data-mode].
   Light is the strict default — an absent data-mode attribute renders light
   (ADR 0009). This file is the ONLY place palette values may appear on the
   public site (ADR 0012); pages reference tokens via the Tailwind mapping
   inlined in each page's <head>. */

/* ===== Calm token layer ===== */

:root {
  color-scheme: light;

  /* Surfaces */
  --bg-page: #f7f8fa;
  --bg-chrome: #ffffff;
  --bg-panel: #ffffff;
  --bg-raised: #f2f4f7;
  --bg-active: #e9ecf1;
  --bg-inset: #f7f8fa;

  /* Text */
  --text-strong: #16191d;
  --text-body: #333a42;
  --text-muted: #5b6470;
  --text-faint: #697077;

  /* Borders & lines */
  --border-1: #dfe3e8;
  --border-2: #c6ccd4;
  --line: #eceff2;

  /* Accent — the ONLY action color */
  --accent: #4652c8;
  --accent-hover: #3a45b0;
  --accent-tint: #eef0fb;
  --accent-border: #cdd2f2;
  --accent-contrast: #ffffff;
  --decor: #0e7490;

  /* Semantic status */
  --ok: #12855b;
  --ok-text: #0d6c4a;
  --ok-bg: #e8f6ef;
  --ok-border: #bfe5d3;
  --warn: #b25e09;
  --warn-text: #935006;
  --warn-bg: #fdf3e1;
  --warn-border: #f0d9ac;
  --err: #c22030;
  --err-text: #a91d2b;
  --err-bg: #fceef0;
  --err-border: #f2c8cd;

  /* Shape, elevation, motion */
  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 8px;
  --shadow-panel: 0px 1px 2px #10182808;
  --shadow-overlay: 0px 8px 24px #10182820;
  --speed-quick: .1s;
  --speed-regular: .25s;
  --ease: cubic-bezier(.23, 1, .32, 1);

  /* Typography (marketing site uses the light-mode rhythm) */
  --body-size: 15px;
  --body-lh: 1.6;
}

html[data-mode="dark"] {
  color-scheme: dark;

  --bg-page: #0c1017;
  --bg-chrome: #111623;
  --bg-panel: #111623;
  --bg-raised: #1a2130;
  --bg-active: #222a3c;
  --bg-inset: #0c1017;

  --text-strong: #f2f5f9;
  --text-body: #c4ccd8;
  --text-muted: #8d97a7;
  --text-faint: #808a9c;

  --border-1: #232c3d;
  --border-2: #33405a;
  --line: #1a2130;

  --accent: #8791f0;
  --accent-hover: #9aa3f4;
  --accent-tint: #1c2040;
  --accent-border: #8791f040;
  --accent-contrast: #0c1017;
  --decor: #38bdc8;

  --ok: #23a06c;
  --ok-text: #46c48d;
  --ok-bg: #23a06c1a;
  --ok-border: #23a06c40;
  --warn: #d99114;
  --warn-text: #e8b04a;
  --warn-bg: #d991141a;
  --warn-border: #d9911440;
  --err: #da4f5a;
  --err-text: #ef7078;
  --err-bg: #d645501a;
  --err-border: #d6455040;

  --shadow-panel: none;
  --shadow-overlay: 0px 8px 28px #00000066;
}

/* ===== Base ===== */

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background-color: var(--bg-page);
  color: var(--text-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
}

.mono {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* Sticky header: translucent chrome over the page canvas */
.site-header {
  background: color-mix(in srgb, var(--bg-chrome) 88%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Cards: panel surface, hairline border, calm elevation */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-panel);
  transition: border-color var(--speed-quick) var(--ease);
}

.card:hover {
  border-color: var(--border-2);
}

/* Screenshot frames: thin bezel, overlay shadow, browser-chrome bar.
   Glow shadows are retired (calm-tokens.md, elevation). */
.shot {
  border: 1px solid var(--border-1);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-overlay);
  background: var(--bg-panel);
}

.shot img {
  display: block;
  width: 100%;
}

.shot-bar {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-raised);
}

.shot-bar span {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  background: var(--border-2);
}

/* Numbered workflow steps */
.step-num {
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  border: 1px solid var(--border-2);
  border-radius: 9999px;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  flex-shrink: 0;
}

/* Faint grid backdrop for the hero */
.hero-grid {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

/* Traceability chain arrows */
.chain > * + *::before {
  content: '→';
  color: var(--accent);
  margin: 0 0.75rem;
}

/* Mode-swapped screenshots: every product shot exists as a light/dark pair
   (assets/shots/light|dark, interim: identical dark set). The pair renders
   from one markup with no per-image JS — the off-mode image is display:none,
   so its loading="lazy" defers the offscreen set until first toggle. Both
   images carry width/height attributes, so the swap cannot shift layout. */
img.shot-img-dark {
  display: none;
}

html[data-mode="dark"] img.shot-img-light {
  display: none;
}

html[data-mode="dark"] img.shot-img-dark {
  display: block;
}

/* Mode toggle: moon shows in light (click → dark), sun shows in dark */
.mode-toggle .icon-sun {
  display: none;
}

html[data-mode="dark"] .mode-toggle .icon-sun {
  display: block;
}

html[data-mode="dark"] .mode-toggle .icon-moon {
  display: none;
}


/* Demo page video frame (public/demo.html): 16:9 box that never scrolls
   horizontally; the video fills it. Kept here, not in tw.css, because
   aspect-ratio utilities were never compiled for the site. */
.demo-video { border-radius: 8px; aspect-ratio: 16 / 9; width: 100%; }
.demo-video video { display: block; width: 100%; height: 100%; background: #0c1017; }

/* Captions on the demo videos: one sentence per cue (built by
   demo/lib/compose.py) and a slightly smaller face than the browser default.
   Mirrors the STYLE block inside the .vtt for engines that ignore it. */
.demo-video video::cue { font-size: 0.85em; line-height: 1.3; background: rgba(12, 16, 23, 0.72); color: #f4f5f7; }