/* Console-only presentation layer, aligned with minimal/assets/refinement.css.
   Keep application selectors, layout contracts and behavior in their own sheets. */
@font-face { font-family: Inter; src: url('/launch/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Archivo; src: url('/launch/fonts/archivo.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Mono; src: url('/launch/fonts/jetbrains-mono.woff2') format('woff2'); font-weight: 100 800; font-display: swap; }
:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #1e2227;
  --muted: #697077;
  --line: #e0e3e6;
  --soft: #f2f5f6;
  --accent: #ed591f;
  --accent-text: #b63e10;
  --accent-soft: #fff1e9;
  --console-ink: var(--ink);
  --console-paper: var(--paper);
  --console-rule: var(--line);
  --console-signal: var(--accent);
}
html[data-theme=dark] {
  color-scheme: dark;
  --paper: #1b1e23;
  --ink: #f5f5f4;
  --muted: #bcc1ca;
  --line: #42464e;
  --soft: #23272e;
  --accent: #ff9363;
  --accent-text: #ffad86;
  --accent-soft: #392b27;
}
body { background: var(--paper); color: var(--ink); font-family: Inter, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #ffd8c4; color: #25211e; }
#root h1, #root h2, #root h3 { font-family: Archivo, Inter, sans-serif; font-weight: 450; letter-spacing: -.035em; }
#root h1 { font-size: clamp(30px, 3vw, 42px); line-height: 1.15; letter-spacing: -.055em; }
#root p, #root .tiny, #root .eyebrow, #root .metric-label,
#root .metric-foot, #root .chart-labels, #root .workspace small,
#root .sidebar-bottom a, #root .nav-group, #root .footer,
#root .field-foot, #root .form-foot span, #root .login-box .stack small,
#root .auth-divider, #root .detail-grid dt, #root .decision-facts dt,
#root .route-progress li, #root .alert-event time, #root .receipt-checksum>span,
#root .mode-switch a small, #root .setup-steps small, #root .key-access small,
#root .docs ul, #root .features, #root .loading { color: var(--muted); }
#root .brand { font-family: Archivo, Inter, sans-serif; font-weight: 450; letter-spacing: -.06em; }
#root .brand .mark, #root .features li::before { color: var(--accent); }
#root .brand .tiny { letter-spacing: .08em; }
#root .shell { background: var(--soft); }
#root .sidebar, #root .topbar, #root .card, #root .mode-switch a,
#root .mode-compare>div { background: var(--paper); border-color: var(--line); }
#root .topbar { height: 68px; color: var(--muted); }
#root .topbar strong, #root .plan-pill strong { color: var(--ink); }
#root .card { border-radius: 12px; box-shadow: 0 2px 8px #122b4003; }
#root .card-head, #root td, #root th, #root .settings-line,
#root .decision-facts, #root .alternatives, #root .decision-card details,
#root .alert-event, #root .receipt-masthead, #root .receipt-checksum,
#root .onboarding-steps { border-color: var(--line); }
#root .workspace, #root .plan-pill, #root .badge, #root .muted-badge,
#root .experience-launch, #root .route-progress, #root .first-stage,
#root .sdk-hero, #root .inference-intro, #root .mode-compare>div:first-child,
#root .decision-card details pre, #root .onboarding-key, #root .routing-receipt {
  background: var(--soft); border-color: var(--line); color: var(--ink);
}
#root .workspace, #root .plan-pill, #root .experience-launch,
#root .sdk-hero, #root .inference-intro, #root .mode-compare>div,
#root .routing-receipt { border-radius: 12px; }
#root .avatar { background: var(--paper); color: var(--ink); border-radius: 50%; }
#root .nav a { color: var(--muted); border-radius: 100px; font-weight: 400; }
#root .nav a:hover { background: var(--soft); color: var(--ink); }
#root .nav a.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
#root button, #root a.button {
  border-radius: 100px; border-color: var(--line); color: var(--ink);
  background: linear-gradient(140deg, var(--paper), var(--soft));
  font-weight: 400; letter-spacing: -.015em; padding: 11px 18px;
  box-shadow: inset 0 1px 0 #ffffff20;
}
#root button:hover, #root a.button:hover { border-color: var(--muted); background: var(--soft); }
#root button.primary, #root .button.primary {
  background: linear-gradient(140deg, #303236, #1b1c1f); border-color: #50545a; color: #f6f6f6;
}
#root button.primary:hover, #root .button.primary:hover { background: #373b41; border-color: var(--accent); }
#root button.danger { color: #b83d32; }
#root :is(button,a,input,textarea,select,summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#root input, #root textarea, #root select { background: var(--paper); color: var(--ink); border-color: var(--line); border-radius: 8px; }
#root input::placeholder, #root textarea::placeholder { color: var(--muted); opacity: 1; }
#root .check-row input, #root progress { accent-color: var(--accent); }
#root .language-switch { border-radius: 100px; background: var(--paper); border-color: var(--line); }
#root .language-switch button { padding: 6px 9px; background: transparent; box-shadow: none; color: var(--muted); }
#root .language-switch button[aria-pressed=true] { background: var(--soft); color: var(--ink); }
#root .badge { border-radius: 100px; color: var(--muted); }
#root .step-number, #root .route-orbit, #root .route-orbit span { border-color: var(--line); color: var(--muted); }
#root .step a, #root .request-link, #root .experience-shortcuts a,
#root .auth-links, #root .route-orbit b, #root .route-progress li.live { color: var(--accent-text); }
#root .request-link { padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
#root .notice, #root .recovery-card, #root .key-result { background: var(--accent-soft); border-color: var(--line); color: var(--ink); border-radius: 10px; }
#root .highlight { border-color: var(--accent); }
#root .chart { border-color: var(--line); background: repeating-linear-gradient(to top, transparent 0, transparent 45px, var(--soft) 46px); }
#root .bar { background: #8b99a3; }
#root .bar:hover { background: var(--accent); }
#root th { background: var(--soft); color: var(--muted); }
#root pre.code { background: #292d33; color: #e0e3e8; border: 1px solid #535760; border-radius: 11px; }
#root .output pre { color: var(--ink); }
#root .code-tabs button[aria-pressed=true] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
#root .empty .empty-icon { color: #8b99a3; }
#root .alert-inbox span, #root .event-dot.warning { background: var(--accent-text); }
#root .alert-event.unread { background: var(--soft); }
#root .onboarding-steps .active { color: var(--accent-text); border-bottom-color: var(--accent); }
#root .onboarding-steps span, #root details summary { color: var(--muted); }
#root .route-orbit i { border-top-color: var(--accent); }
#root [data-experience] { --muted: #697077; --line: #e0e3e6; --signal: #ed591f; }
html[data-theme=dark] #root [data-experience] { --muted: #bcc1ca; --line: #42464e; --signal: #ff9363; }
#root .login { background: var(--paper); }
#root .login-story {
  background: #f2f5f6; color: #1e2227; border-right: 1px solid #e0e3e6;
  padding: clamp(32px, 5vw, 76px); gap: 56px;
}
#root .login-story .brand { color: #1e2227; }
#root .login-story .brand .mark { color: #ed591f; }
#root .login-story h1 { font-size: clamp(40px, 4.5vw, 66px); line-height: 1.1; max-width: 580px; margin-bottom: 26px; }
#root .login-story p, #root .login-story .eyebrow,
#root .login-story .tiny, #root .login-links { color: #697077; }
#root .login-form { background: var(--paper); padding: 48px 36px; }
#root .login-box { max-width: 410px; }
#root .login-box h1 { font-size: 36px; }
#root .login-box .stack { gap: 20px; }
#root .login-box .auth-links a:hover, #root .login-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
html[data-theme=dark] #root .login-story { background: #23272e; color: var(--ink); border-color: var(--line); }
html[data-theme=dark] #root .login-story .brand { color: var(--ink); }
html[data-theme=dark] #root .login-story :is(p,.eyebrow,.tiny,.login-links) { color: var(--muted); }
#toast { background: #292d33; color: #f5f5f4; border: 1px solid #535760; border-radius: 12px; }
@media (max-width: 700px) {
  #root .topbar { height: auto; }
  #root .login-story { padding: 30px 24px; min-height: 290px; gap: 36px; border-right: 0; border-bottom: 1px solid var(--line); }
  #root .login-story h1 { font-size: 40px; }
  #root .login-form { padding: 36px 24px; }
  #root .login-box h1 { font-size: 32px; }
  #root .sidebar .nav a { padding: 9px 12px; }
}