/* NXT design system — base layer.
   Load order (layout.ts): /theme/core.css (tokens) → base → components → shell → /theme/<product>.css
   (colours) → /theme/products.css → marketing (site pages) → /assets/p/<product>.css → utilities.
   Colours are ONLY ever read from --c-* tokens; sizes from --t-*, --s-*, --r-*, --e-*, --d-*. */

@layer base, components, shell, marketing, product, utilities;

@layer base {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--layout-header) + var(--s-4)); }
  @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
  body {
    margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
    background: var(--c-bg); color: var(--c-text);
    font-family: var(--font-sans); font-size: var(--t-body); line-height: var(--lh-body);
    font-kerning: normal; font-variant-numeric: proportional-nums; text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
  }
  main { flex: 1 0 auto; outline: none; }
  img, svg, video, canvas { display: block; max-width: 100%; }
  svg.i { flex: none; }
  ::selection { background: color-mix(in srgb, var(--c-primary) 28%, transparent); }

  /* Type roles: Display, H1–H4, Lead, Body, Small, Caption, Overline, Code, Numeric */
  h1, h2, h3, h4, h5 { margin: 0; color: var(--c-text); text-wrap: balance; }
  h1 { font: var(--fw-h1) var(--t-h1)/var(--lh-h1) var(--ff-h1); letter-spacing: var(--tr-h1); }
  h2 { font: var(--fw-h2) var(--t-h2)/var(--lh-h2) var(--ff-h2); letter-spacing: var(--tr-h2); }
  h3 { font: var(--fw-h3) var(--t-h3)/var(--lh-h3) var(--ff-h3); letter-spacing: var(--tr-h3); }
  h4, h5 { font: var(--fw-h4) var(--t-h4)/var(--lh-h4) var(--ff-h4); letter-spacing: var(--tr-h4); }
  .h-display, .display { font: var(--fw-display) var(--t-display)/var(--lh-display) var(--ff-display); letter-spacing: var(--tr-display); }
  .display-2, .h-section { font: var(--fw-h1) var(--t-h1)/var(--lh-h1) var(--ff-h1); letter-spacing: var(--tr-h1); }
  .display-3 { font: var(--fw-h2) var(--t-h2)/var(--lh-h2) var(--ff-h2); letter-spacing: var(--tr-h2); }
  .lede, .lead { font-size: var(--t-lead); line-height: var(--lh-lead); letter-spacing: var(--tr-lead); color: var(--c-muted); max-width: 60ch; }
  p { margin: 0 0 var(--s-4); max-width: var(--layout-prose); text-wrap: pretty; }
  p:last-child { margin-bottom: 0; }
  ul, ol { padding-left: 1.25em; margin: 0 0 var(--s-4); }
  li + li { margin-top: var(--s-1); }
  small, .small { font-size: var(--t-small); line-height: var(--lh-small); }
  .caption { font-size: var(--t-caption); line-height: var(--lh-caption); font-weight: var(--fw-caption); letter-spacing: var(--tr-caption); }
  .overline, .eyebrow { font: var(--fw-overline) var(--t-overline)/var(--lh-overline) var(--ff-overline); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); margin: 0 0 var(--s-3); }
  .eyebrow { color: var(--c-link); }
  .muted { color: var(--c-muted); }
  .num, td.num, th.num { font-variant-numeric: tabular-nums lining-nums; }
  strong, b { font-weight: 600; }
  hr { border: 0; border-top: 1px solid var(--c-border); margin: var(--s-8) 0; }

  a { color: var(--c-link); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out); }
  a:hover { text-decoration-color: currentColor; }

  code, kbd, pre, samp { font-family: var(--font-mono); font-size: var(--t-code); }
  :not(pre) > code { padding: 0.1em 0.35em; border-radius: var(--r-xs); background: var(--c-surface2); border: 1px solid var(--c-border); font-size: 0.86em; }
  pre { margin: 0 0 var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: var(--c-surface2); border: 1px solid var(--c-border); overflow-x: auto; line-height: var(--lh-code); }
  kbd { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 0.4em; border: 1px solid var(--c-border); border-bottom-width: 2px; border-radius: var(--r-xs); background: var(--c-surface); color: var(--c-muted); font-size: 0.6875rem; line-height: 1; }
  .kbd-group { display: inline-flex; gap: 2px; }

  table { width: 100%; border-collapse: collapse; }
  details > summary { cursor: pointer; }
  fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
  legend { padding: 0; font-weight: 600; font-size: var(--t-small); margin-bottom: var(--s-2); }
  button, input, select, textarea { font: inherit; color: inherit; }
  [hidden] { display: none !important; }

  /* Focus: a double ring (outer --c-focus, inner --c-focus-inner — black/white or white/black), visible on any surface. */
  :focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-xs); box-shadow: 0 0 0 2px var(--c-focus-inner); }
  :root { --i-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 21.5 20h-19zM12 10v4.5M12 17.2h.01'/%3E%3C/svg%3E"); }
  .skip { position: fixed; left: var(--s-4); top: var(--s-3); z-index: var(--z-skip); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); background: var(--c-primary); color: var(--c-on-primary); font-weight: 600; text-decoration: none; transform: translateY(-160%); transition: transform var(--d-fast) var(--ease-out); }
  .skip:focus { transform: none; }
  .sr-only { 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; }

  /* Layout primitives */
  .wrap { width: 100%; max-width: var(--layout-page); margin: 0 auto; padding-inline: max(var(--layout-gutter), env(safe-area-inset-left)); }
  .stack > * + * { margin-top: var(--s-4); }
  .row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
  .spread { display: flex; gap: var(--s-4); align-items: center; justify-content: space-between; flex-wrap: wrap; }
  .grid-2 { display: grid; gap: var(--s-6); align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
  .grid-3 { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
  .pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
  .mono, textarea.mono { font-family: var(--font-mono); font-size: var(--t-code); }

  /* Prose (legal, docs, posts, AI replies) */
  .prose { max-width: var(--layout-prose); }
  .prose > * + * { margin-top: var(--s-4); }
  .prose h2 { margin-top: var(--s-12); font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.75rem); }
  .prose h3 { margin-top: var(--s-8); }
  .prose li { margin-bottom: var(--s-2); }
  .prose pre { white-space: pre-wrap; }
  .prose blockquote { margin: var(--s-6) 0; padding-left: var(--s-5); border-left: 2px solid var(--c-primary); color: var(--c-muted); }
  .prose img { border-radius: var(--r-md); }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  }
  @media print {
    .gh, .gf, .app-side, .app-tabbar, .fab, .skip, .toast-region, .btn, dialog { display: none !important; }
    body { background: #fff; color: #000; }
    .app { display: block !important; }
    .panel { break-inside: avoid; border-color: #000; box-shadow: none; }
  }
}