/* RONIN LANDING DOCUMENT TOKENS
 *
 * The concept pages use the same semantic roles and scales as Cowork's foundations
 * (`ronin-cowork/public/style.css`, governed by `docs/ui.md`). This file is a preview
 * dependency, not a second palette: values move when the product tokens move.
 *
 * Public pages use the spacious end of the scales and mostly the UI face. Mono marks
 * commands, small labels and identity. Shared tokens do not mean terminal cosplay.
 */
:root {
  color-scheme: dark;
  --bg: #0b0e14;
  --bg-2: #0f131c;
  --panel: #131826;
  --raise: #1a2233;
  --raise-2: #263047;
  --well: #0d1220;
  --line: #1f2738;
  --line-2: #2a3247;
  --line-3: #3a4560;
  --fg-strong: #d7e3f7;
  --fg: #c5c8c6;
  --muted: #6b7488;
  --muted-2: #8fa3c8;
  --muted-3: #6f80a0;
  --dim: #454d61;
  --accent: #e0af68;
  --accent-2: #81a2be;
  --ok: #b5bd68;
  --warn: #f0c674;
  --bad: #cc6666;
  --action: #2f6fd0;
  --kaki: #c46243;
  --aiiro: #274a78;
  --on-accent: #000;
  --term-bg: #0b0e14;
  --term-fg: #c5c8c6;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-9: 20px;
  --space-10: 24px;
  --space-11: 28px;
  --space-12: 34px;

  --text-1: 9px;
  --text-2: 11px;
  --text-3: 12px;
  --text-4: 13px;
  --text-5: 14px;
  --text-6: 15px;
  --text-7: 16px;
  --text-8: 18px;
  --text-9: 20px;
  --text-10: 26px;
  --text-micro: 10px;

  --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-term: Menlo, 'DejaVu Sans Mono', Consolas, monospace;
  --edge: 1px;
  --edge-2: 2px;
  --page: 1120px;
  --measure: 680px;
  --header-height: 76px;
  --motion-quick: 120ms;
  --motion-settle: 220ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--fg-strong); font: var(--text-7)/1.65 var(--font-ui); }
a { color: inherit; }
button, input { font: inherit; }
::selection { background: var(--aiiro); color: var(--fg-strong); }
:focus-visible { outline: var(--edge-2) solid var(--accent); outline-offset: var(--space-2); }
.site-header { min-height: var(--header-height); border-bottom: var(--edge) solid var(--line); }
.site-header__inner { width: min(var(--page), calc(100% - 40px)); min-height: var(--header-height); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.brand { display: inline-flex; align-items: center; gap: var(--space-5); color: var(--fg-strong); text-decoration: none; font: 600 var(--text-5)/1 var(--font-mono); letter-spacing: .08em; }
.brand img { display: block; width: 34px; height: auto; }
.brand-name { display: inline-flex; gap: .12em; }
.brand-cowork { color: var(--kaki); }
.site-nav { display: flex; align-items: center; gap: var(--space-8); color: var(--muted-2); font: var(--text-3)/1 var(--font-mono); }
.site-nav a { text-decoration: none; }
.site-nav a:hover { color: var(--fg-strong); }
.page { width: min(var(--page), calc(100% - 40px)); margin: auto; padding: 72px 0 96px; }
.eyebrow { margin: 0 0 var(--space-6); color: var(--kaki); font: 600 var(--text-2)/1.4 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.display { max-width: 900px; margin: 0; font: 600 clamp(42px, 7vw, 76px)/.98 var(--font-ui); letter-spacing: -.055em; text-wrap: balance; }
.lede { max-width: var(--measure); margin: var(--space-9) 0 0; color: var(--muted-2); font-size: clamp(var(--text-8), 2.2vw, var(--text-10)); line-height: 1.5; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-6) var(--space-9); border: var(--edge) solid var(--line-3); border-radius: var(--radius-sm); background: transparent; color: var(--fg-strong); font: 600 var(--text-5)/1 var(--font-mono); text-decoration: none; cursor: pointer; transition: border-color var(--motion-quick), background var(--motion-quick), color var(--motion-quick); }
.button:hover { border-color: var(--kaki); color: var(--kaki); }
.button--primary { border-color: var(--kaki); background: var(--kaki); color: var(--bg); }
.button--primary:hover { background: transparent; color: var(--kaki); }
.section-label { margin: 0; color: var(--muted); font: var(--text-2)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.session-brief { max-width: 920px; margin: 0 0 72px; padding: clamp(24px, 4vw, 40px); border: var(--edge) solid var(--line-2); border-radius: var(--radius-md); background: var(--panel); }
.session-brief__head { display: grid; grid-template-columns: 1fr auto; gap: var(--space-9); align-items: start; margin-bottom: var(--space-9); }
.session-brief__head h2 { margin: var(--space-4) 0 0; font: 500 var(--text-10)/1.25 var(--font-ui); }
.session-brief__head p { max-width: var(--measure); margin: var(--space-6) 0 0; color: var(--muted-2); }
.session-brief__copy { min-width: 62px; border: var(--edge) solid var(--line-3); border-radius: var(--radius-xs); background: var(--raise); color: var(--fg-strong); padding: var(--space-5) var(--space-7); font: var(--text-2) var(--font-mono); cursor: pointer; }
.session-brief__copy:hover { border-color: var(--kaki); color: var(--kaki); }
.session-brief pre { max-height: 320px; margin: 0; padding: var(--space-9); border-radius: var(--radius-sm); background: var(--term-bg); color: var(--term-fg); font: var(--text-4)/1.65 var(--font-term); white-space: pre-wrap; overflow: auto; }
.site-footer { width: min(var(--page), calc(100% - 40px)); margin: auto; padding: var(--space-10) 0 48px; border-top: var(--edge) solid var(--line); display: flex; justify-content: space-between; gap: var(--space-8); color: var(--muted); font: var(--text-2)/1.6 var(--font-mono); }
@media (max-width: 640px) {
  .site-header__inner, .page, .site-footer { width: min(100% - 28px, var(--page)); }
  .brand img { display: block; }
  .brand-name { display: none; }
  .site-nav a:not(.button) { display: none; }
  .page { padding: 52px 0 72px; }
  .display { font-size: clamp(38px, 13vw, 58px); }
  .session-brief__head { grid-template-columns: 1fr; }
  .session-brief__copy { justify-self: start; }
  .site-footer { flex-direction: column; }
}

/* Compact sticky CTA strip on explainer pages: both cultural CTAs stay reachable
 * while scrolling. Sticky, so it pushes content rather than covering it. */
.cta-strip { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: var(--edge) solid var(--line); }
.cta-strip__inner { width: min(var(--page), calc(100% - 40px)); margin: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-4) 0; }
.cta-strip__label { color: var(--muted); font: 600 var(--text-2)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; }
.cta-strip__actions { display: flex; gap: var(--space-5); }
.cta-strip .button { min-height: 36px; padding: var(--space-4) var(--space-7); font-size: var(--text-3); }
@media (max-width: 640px) {
  .cta-strip__inner { width: min(100% - 28px, var(--page)); justify-content: center; }
  .cta-strip__label { display: none; }
}

/* Command cards keep the action visible while only the command itself scrolls. */
.door { min-width: 0; }
.command { overflow: hidden; }
.command code { display: block; overflow-x: auto; }

/* Shared explainer structure. Individual pages own only the layouts their evidence needs. */
.explainer-breadcrumbs { margin: 0 0 var(--space-8); color: var(--muted); font: var(--text-3)/1.5 var(--font-mono); }
.explainer-breadcrumbs a { color: var(--muted-2); text-underline-offset: 3px; }
.explainer-hero { max-width: 920px; margin-bottom: 64px; }
.explainer-section { max-width: 920px; padding: clamp(32px, 5vw, 58px) 0; border-top: var(--edge) solid var(--line); }
.explainer-section h2 { margin: 0 0 var(--space-8); font: 500 var(--text-10)/1.25 var(--font-ui); }
.explainer-section p, .explainer-section li { max-width: var(--measure); color: var(--muted-2); }
.explainer-section p { margin: 0 0 var(--space-8); }
.explainer-section li + li { margin-top: var(--space-6); }
.explainer-media { margin: var(--space-10) 0; border: var(--edge) solid var(--line-2); border-radius: var(--radius-md); overflow: hidden; background: var(--panel); }
.explainer-media img, .explainer-media video { display: block; width: 100%; height: auto; }
.explainer-media figcaption { padding: var(--space-7) var(--space-9); color: var(--muted-2); font-size: var(--text-5); }
.explainer-boundary { max-width: 820px; padding: var(--space-9); border-left: 3px solid var(--kaki); background: var(--raise); }
.explainer-boundary h2, .explainer-boundary p { margin: 0; }
.explainer-boundary p { margin-top: var(--space-6); color: var(--muted-2); }
.explainer-next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-10); align-items: center; margin-top: 72px; padding: var(--space-10); border-radius: var(--radius-md); background: var(--raise); }
.explainer-next h2, .explainer-next p { margin: 0; }
.explainer-next p { margin-top: var(--space-5); color: var(--muted-2); }
.explainer-actions { display: flex; flex-wrap: wrap; gap: var(--space-6); }
@media (max-width: 640px) {
  .explainer-next { grid-template-columns: 1fr; }
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: #f4f2ec;
    --bg-2: #eae7df;
    --panel: #ffffff;
    --raise: #f1efe8;
    --raise-2: #e6e2d8;
    --well: #f7f5ef;
    --line: #d9d4c8;
    --line-2: #c8c2b2;
    --line-3: #a9a191;
    --fg-strong: #14161c;
    --fg: #2c2e36;
    --muted: #6d7284;
    --muted-2: #5a617a;
    --muted-3: #6d7284;
    --dim: #b0aca0;
    --accent: #a06b1a;
    --accent-2: #3f6a95;
    --ok: #5c7a1d;
    --warn: #9a7b00;
    --bad: #b04343;
    --action: #1f5fc9;
    --term-bg: #faf8f2;
    --term-fg: #2e302c;
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f2ec;
  --bg-2: #eae7df;
  --panel: #ffffff;
  --raise: #f1efe8;
  --raise-2: #e6e2d8;
  --well: #f7f5ef;
  --line: #d9d4c8;
  --line-2: #c8c2b2;
  --line-3: #a9a191;
  --fg-strong: #14161c;
  --fg: #2c2e36;
  --muted: #6d7284;
  --muted-2: #5a617a;
  --muted-3: #6d7284;
  --dim: #b0aca0;
  --accent: #a06b1a;
  --accent-2: #3f6a95;
  --ok: #5c7a1d;
  --warn: #9a7b00;
  --bad: #b04343;
  --action: #1f5fc9;
  --term-bg: #faf8f2;
  --term-fg: #2e302c;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0e14;
  --bg-2: #0f131c;
  --panel: #131826;
  --raise: #1a2233;
  --raise-2: #263047;
  --well: #0d1220;
  --line: #1f2738;
  --line-2: #2a3247;
  --line-3: #3a4560;
  --fg-strong: #d7e3f7;
  --fg: #c5c8c6;
  --muted: #6b7488;
  --muted-2: #8fa3c8;
  --muted-3: #6f80a0;
  --dim: #454d61;
  --accent: #e0af68;
  --accent-2: #81a2be;
  --ok: #b5bd68;
  --warn: #f0c674;
  --bad: #cc6666;
  --action: #2f6fd0;
  --term-bg: #0b0e14;
  --term-fg: #c5c8c6;
}

.theme-switch {
  width: 42px;
  height: 24px;
  padding: 4px;
  border: var(--edge) solid var(--line-3);
  border-radius: var(--radius-pill);
  background: var(--well);
  cursor: pointer;
}
.theme-switch:hover { border-color: var(--kaki); }
.theme-switch__track {
  position: relative;
  display: block;
  width: 32px;
  height: 14px;
  background: radial-gradient(circle, var(--muted) 1.5px, transparent 2px) 0 50% / 16px 14px repeat-x;
}
.theme-switch__track i {
  position: absolute;
  top: 3px;
  left: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kaki);
  box-shadow: 0 0 0 2px var(--well);
  transition: transform var(--motion-settle) var(--ease-out);
}
.theme-switch[data-theme-choice="light"] .theme-switch__track i { transform: translateX(-12px); }
.theme-switch[data-theme-choice="dark"] .theme-switch__track i { transform: translateX(12px); }