/* SHELEG Design — Notation token layer (light default + dark twin).
   Copy verbatim; consume only var(--…) in components.
   Theme switch: set data-theme="dark" on :root.

   Measured from twenty.com on 2026-08-15, read off its live computed styles. The
   reference is a near-white developer-product page whose argument is RESTRAINT — one
   hairline family instead of cards, radii of 2 and 4px, and a serif at weight 300
   against a monospace, with almost no filled surface anywhere.

   The primary control is INK, not the accent. That is the reference's own decision and
   it is what keeps the single accent available for meaning: on a page with this little
   colour, spending it on a button leaves nothing to mark a link with. */
:root {
  --bg: #ffffff;
  --panel: #fafafa;
  --panel-2: #f2f2f2;
  --ink: #1c1c1c;
  --muted: #5f5f5f;
  --border: #dfdfdf;
  --border-strong: #cccccc;
  --edge: #8d8d8d;

  --accent: #1f5fb0;
  --accent-weak: #e9eef4;
  --accent-ink: #ffffff;

  --ok: #1c6b45;
  --ok-weak: #e9efec;
  --warn: #8a5200;
  --warn-weak: #f1ede7;
  /* DERIVED, not measured — the reference paints no error state. Authored to clear
     AA on the field, the panel and its own tint (6.54 / 6.26 / 5.50). */
  --danger: #b3261e;
  --danger-weak: #f4e9e9;
  --info: #1f5fb0;
  --info-weak: #e9eef4;

  /* The primary control is the ink. See the header. */
  --control: #1c1c1c;
  --control-ink: #ffffff;

  --r-control: 4px;
  --r-card: 4px;
  --r-pill: 999px;
  /* The chamfer, and it is the pack's signature: a 10px corner cut on the primary,
     built from two clipped layers because `clip-path` clips an inset `box-shadow`
     and a chamfered outline drawn any other way has no line on its diagonal. */
  --chamfer: 10px;

  --shadow-1: 0 2px 4px rgba(0, 0, 0, 0.04);

  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-state: 0.14s;
  --dur-hover: 0.1s;

  --font-display: Aleo, Georgia, "Times New Roman", serif;
  --font-ui: Inter, system-ui, sans-serif;
  --font-data: "Geist Mono", ui-monospace, "SFMono-Regular", monospace;

  --t-meta: 12px;
  --t-body: 16px;
  --t-card: 19px;
  --t-title: 24px;
  --t-section: 32px;
  --t-page: 38px;
  --t-hero: 60px;

  --w-display: 300;
  --w-body: 400;
  --w-med: 500;
  --w-semi: 500;
  --w-bold: 500;

  --track-tight: -0.02em;
  --track-wide: 0.08em;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  background-color: var(--bg);
  color: var(--ink);
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #141414;
  --panel: #1c1c1c;
  --panel-2: #242424;
  --ink: #f2f2f2;
  --muted: #a0a0a0;
  --border: #2b2b2b;
  --border-strong: #3a3a3a;
  --edge: #686868;

  --accent: #3392ff;
  --accent-weak: #1e252e;
  --accent-ink: #141414;

  --ok: #46d39a;
  --ok-weak: #1f2a26;
  --warn: #e0a030;
  --warn-weak: #2b261e;
  --danger: #ff7b72; /* derived — 7.31 field / 6.76 panel / 6.03 own tint */
  --danger-weak: #2e2323;
  --info: #3392ff;
  --info-weak: #1e252e;

  /* On ink the control inverts to the accent: an ink button on an ink field is a
     rectangle nobody can see. */
  --control: #3392ff;
  --control-ink: #141414;

  --shadow-1: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Light is the default register. To follow the OS instead, have the app set
   data-theme="dark" from a prefers-color-scheme listener — keep one switch,
   never two sources of truth for the theme. */

/* The base layer. `--w-semi` and `--w-bold` are both 500 because this pack has no
   bold — emphasis is the serif, the mono or a rule — so `<strong>` resolves to that
   500 rather than to the UA's 700, which is the one weight the system does not
   contain. Without this rule the ban lived only in the Bans list, where no browser
   reads it. */
strong, b { font-weight: var(--w-bold); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-state: 0s;
    --dur-hover: 0s;
  }
}
/* ── components ── */

/* Every value below is a token. The pack's whole elevation model is the seam, so
   there is no shadow in this file outside the one --shadow-1 the token layer owns,
   and no colour literal at all — the gate reads this section for both. */

.nt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 36px;
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--r-control);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: var(--w-med);
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--dur-hover) var(--motion-ease),
    border-color var(--dur-hover) var(--motion-ease),
    color var(--dur-hover) var(--motion-ease);
}

.nt-btn--sm {
  min-height: 28px;
  padding-inline: var(--space-3);
}

.nt-btn--lg {
  min-height: 44px;
  padding-inline: var(--space-5);
}

/* The label colour is stated here rather than inherited: an anchor reset that says
   `color: inherit` outranks a bare utility and paints ink on the accent. */
.nt-btn--primary {
  background: var(--control);
  border-color: var(--control);
  color: var(--control-ink);
}

.nt-btn--primary:hover:not(:disabled) {
  background: var(--ink);
  border-color: var(--ink);
}

.nt-btn--secondary {
  background: var(--panel);
  border-color: var(--edge);
  color: var(--ink);
}

.nt-btn--secondary:hover:not(:disabled) {
  border-color: var(--muted);
}

.nt-btn--ghost {
  background: transparent;
  color: var(--muted);
}

.nt-btn--ghost:hover:not(:disabled) {
  color: var(--ink);
}

.nt-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* One focus idiom on every control — a button, an input and a link get the same
   ring, because three focus treatments is three things to learn. */
.nt-btn:focus-visible,
.nt-chip:focus-visible,
.nt-status:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-weak);
  border-color: var(--accent);
}

.nt-card {
  container-type: inline-size;
  display: block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
}

.nt-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 14px var(--space-5);
  border-bottom: 1px solid var(--border);
}

.nt-card__title {
  margin: 0;
  font-size: var(--t-card);
  font-weight: var(--w-semi);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.nt-card__meta {
  font-family: var(--font-data);
  font-size: var(--t-meta);
  letter-spacing: var(--track-wide);
  color: var(--muted);
}

.nt-card__body {
  padding: var(--space-5);
}

/* CONTAINER, not PAGE: the head stacks against the card's own width, so a card in a
   narrow column behaves the same wherever the column happens to be. */
@container (max-width: 30rem) {
  .nt-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
}

.nt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  padding-inline: var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: var(--w-med);
  white-space: nowrap;
}

.nt-chip--neutral {
  background: var(--panel-2);
  color: var(--muted);
}

.nt-chip--accent {
  background: var(--accent-weak);
  color: var(--accent);
}

/* The rail — the one place the accent is a shape rather than a word. */
.nt-chip--selected {
  position: relative;
  padding-left: var(--space-4);
  color: var(--ink);
}

.nt-chip--selected::before {
  content: "";
  position: absolute;
  left: var(--space-2);
  top: 25%;
  bottom: 25%;
  width: 2px;
  border-radius: var(--r-pill);
  background: var(--accent);
}

.nt-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nt-stat__label {
  font-size: var(--t-body);
  color: var(--muted);
}

.nt-stat__value {
  font-size: var(--t-section);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-tight);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.nt-stat__source {
  font-family: var(--font-data);
  font-size: var(--t-meta);
  letter-spacing: var(--track-wide);
  color: var(--muted);
}

.nt-heading {
  margin: 0;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}

.nt-heading--1 {
  font-size: var(--t-page);
  font-weight: var(--w-bold);
  line-height: 1.2;
}

.nt-heading--2 {
  font-size: var(--t-section);
  font-weight: var(--w-bold);
  line-height: 1.2;
}

/* Level 3 is body size and separates by weight alone, which is what stops a dense
   screen from becoming a ladder of sizes. */
.nt-heading--3 {
  font-size: var(--t-card);
  font-weight: var(--w-semi);
  line-height: 1.35;
}

.nt-rule {
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--border);
}

.nt-rule--strong {
  background: var(--border-strong);
}

.nt-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 24px;
  padding-inline: var(--space-3);
  border-radius: var(--r-pill);
  font-family: var(--font-ui);
  font-size: var(--t-meta);
  font-weight: var(--w-med);
  white-space: nowrap;
}

.nt-status__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-pill);
  flex: none;
  background: currentColor;
}

.nt-status--ok {
  background: var(--ok-weak);
  color: var(--ok);
}

.nt-status--ok .nt-status__dot {
  background: var(--ok);
}

.nt-status--warn {
  background: var(--warn-weak);
  color: var(--warn);
}

.nt-status--warn .nt-status__dot {
  background: var(--warn);
}

.nt-status--danger {
  background: var(--danger-weak);
  color: var(--danger);
}

.nt-status--danger .nt-status__dot {
  background: var(--danger);
}

.nt-status--neutral {
  background: var(--panel-2);
  color: var(--muted);
}

.nt-status--neutral .nt-status__dot {
  background: var(--muted);
}

.nt-skeleton {
  display: block;
  border-radius: var(--r-control);
  background: var(--panel-2);
}

/* Static by decision. The reference's skeletons do not animate, and a shimmer is
   motion spent telling the reader something they already know. */
@media (prefers-reduced-motion: reduce) {
  .nt-btn {
    transition: none;
  }
}

.nt-eyebrow {
  display: inline-block;
  font-family: var(--font-data);
  font-size: var(--t-meta);
  font-weight: var(--w-med);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--muted);
}