/* netrosetta -- the design system.
 *
 * One file, three consumers: this site, the trial service at /try, and the
 * window `netrosetta ui` opens. A change here is a change everywhere, which is
 * the entire point of it existing.
 *
 * Font loading is deliberately NOT in here. The same two faces reach each
 * consumer differently -- the site links fonts.css, the app has them inlined as
 * data URIs because it runs with no network -- and mixing delivery into the
 * system would force one mechanism on all three.
 *
 * The palette is the mark's own: #1a2a3a and #017288 are sampled out of the
 * logo, and #080b11 is the ground it was drawn on.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
  /* surfaces, lightest to most sunken */
  --ground:    #fcfdfd;
  --panel:     #ffffff;
  --sunk:      #f2f6f8;

  /* text, strongest to weakest */
  --ink:       #1a2a3a;
  --ink-soft:  #41566a;
  --muted:     #74889a;

  /* lines: --rule separates things, --hair only groups them */
  --rule:      #dde6ec;
  --hair:      #ebf1f4;

  --accent:          #017288;
  --accent-strong:   #015a6b;  /* accent as text on a light ground */
  --accent-contrast: #ffffff;  /* text on an accent fill */

  /* Severity, from the diagnostics. Not the accent: a warning must never be
     mistakable for a brand colour. Each is legible on --panel at body size. */
  --sev-fatal: #a0182b;
  --sev-error: #b3421a;
  --sev-warn:  #8a5a00;
  --sev-info:  #4a6076;

  --display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --body:    "Karla", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --mono:    ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;

  /* Type scale. Display sizes are fluid; reading sizes are not, because a
     paragraph that changes size as you resize the window is unsettling. */
  --t-hero:  clamp(2.9rem, 7.4vw, 4.5rem);
  --t-h2:    clamp(1.75rem, 3.6vw, 2.4rem);
  --t-h3:    1.02rem;
  --t-lead:  1.16rem;
  --t-body:  1rem;
  --t-small: 0.91rem;
  --t-label: 0.71rem;

  --s-1: 6px;
  --s-2: 11px;
  --s-3: 18px;
  --s-4: 26px;
  --s-5: 40px;
  --s-6: 64px;
  --s-section: clamp(76px, 11vw, 132px);

  --r-sm: 4px;
  --r-md: 7px;
  --r-pill: 999px;
}

/* Dark comes in two ways: the viewer chose it, or their system is set to it
   and they chose nothing. Both have to be covered, and an explicit light
   choice has to beat a dark system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground:    #080b11;
    --panel:     #0e161d;
    --sunk:      #121b23;
    --ink:       #dae5ec;
    --ink-soft:  #a7bac9;
    --muted:     #778b9c;
    --rule:      #1e2a35;
    --hair:      #151f28;
    --accent:          #35d3df;
    --accent-strong:   #7fe6ee;
    --accent-contrast: #06202a;
    --sev-fatal: #ff8d94;
    --sev-error: #ffa274;
    --sev-warn:  #e0a95a;
    --sev-info:  #9fb4c6;
  }
}
:root[data-theme="dark"] {
  --ground:    #080b11;
  --panel:     #0e161d;
  --sunk:      #121b23;
  --ink:       #dae5ec;
  --ink-soft:  #a7bac9;
  --muted:     #778b9c;
  --rule:      #1e2a35;
  --hair:      #151f28;
  --accent:          #35d3df;
  --accent-strong:   #7fe6ee;
  --accent-contrast: #06202a;
  --sev-fatal: #ff8d94;
  --sev-error: #ffa274;
  --sev-warn:  #e0a95a;
  --sev-info:  #9fb4c6;
}

/* ------------------------------------------------------------------ base -- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-hero); line-height: 1.02; letter-spacing: -0.028em; }
h2 { font-size: var(--t-h2); line-height: 1.14; }
h1 em, h2 em { font-style: italic; color: var(--accent); }

h3 {
  font-family: var(--body);
  font-size: var(--t-h3);
  font-weight: 600;
  letter-spacing: -0.006em;
  margin: 0;
}

p { margin: 0; color: var(--ink-soft); }
p.lead { color: var(--ink); font-size: var(--t-lead); line-height: 1.62; }
strong { color: var(--ink); font-weight: 600; }

a { color: var(--accent-strong); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

code, kbd, samp {
  font-family: var(--mono);
  font-size: 0.87em;
  background: var(--sunk);
  padding: 1px 5px;
  border-radius: var(--r-sm);
  color: var(--ink);
}
pre {
  font-family: var(--mono);
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3);
  overflow-x: auto;
  font-size: var(--t-small);
  line-height: 1.55;
  margin: 0;
}
pre code { background: none; padding: 0; }

/* --------------------------------------------------------------- pieces -- */

.wrap { max-width: 780px; margin: 0 auto; padding: 0 30px; }
.wrap-wide { max-width: 1040px; margin: 0 auto; padding: 0 30px; }

/* The eyebrow. Uppercase needs letter-spacing or it sets too tight to read. */
.label {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The mark, cropped to its artwork: it is nearly twice as wide as it is tall,
   so a square box would centre a thin strip inside it. */
.mark { width: 34px; height: 19px; flex: none; color: var(--ink); }

.wordmark { display: flex; align-items: center; gap: var(--s-2); }
.wordmark b {
  font-weight: 600;
  font-size: 1.01rem;
  letter-spacing: -0.018em;
}
.wordmark b i { color: var(--accent); font-style: normal; }

.panel {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4);
}

/* Buttons. `.btn` alone is the quiet one; the modifiers are the loud ones. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.004em;
  line-height: 1.2;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.16s ease, border-color 0.16s ease;
}
.btn:hover { border-color: var(--muted); }
.btn-solid {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.btn-solid:hover { opacity: 0.85; border-color: var(--accent); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* The underlined text link that carries a section, as on the landing page. */
.btn-text {
  align-self: flex-start;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 3px;
  transition: opacity 0.16s ease;
}
.btn-text:hover { opacity: 0.62; }

.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
  background: var(--sunk);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  padding: 4px 12px;
  font-variant-numeric: tabular-nums;
}

/* Forms -- the trial needs exactly these two. */
.field { display: flex; flex-direction: column; gap: var(--s-1); }
.field > span { font-size: var(--t-small); color: var(--ink-soft); font-weight: 500; }
input[type="email"], input[type="text"], select {
  font-family: var(--body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  width: 100%;
}
input::placeholder { color: var(--muted); }

/* Tables. Wide ones scroll inside .scroll, never taking the page with them. */
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.93rem; }
th {
  text-align: left;
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--rule);
}
td {
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--hair);
  color: var(--ink-soft);
  vertical-align: top;
}
td:last-child, th:last-child { padding-right: 0; }
td.device { font-family: var(--mono); color: var(--ink); }
td.num { font-variant-numeric: tabular-nums; text-align: right; }

/* Severity, for a diagnostic list or an inventory row. */
.sev { font-weight: 600; }
.sev-fatal { color: var(--sev-fatal); }
.sev-error { color: var(--sev-error); }
.sev-warn  { color: var(--sev-warn); }
.sev-info  { color: var(--sev-info); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}