/* nps-base.css — Cut Shop reset, type, utilities, container root. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  font-size: 100%;
  hanging-punctuation: first last;
}

html[data-size="big"] { font-size: 115%; }
html[data-size="large"] { font-size: 125%; }
html[data-size="jumbo"] { font-size: 150%; }

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--nps-font-ui);
  font-size: var(--nps-fs-body);
  font-weight: var(--nps-fw-regular);
  line-height: var(--nps-lh-body);
  color: var(--nps-ink);
  background-color: var(--nps-page);
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--nps-ink) 4%, transparent),
      transparent 18rem
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 0.6875rem,
      color-mix(in srgb, var(--nps-ink) 3%, transparent) 0.75rem
    );
  background-size: auto, 0.75rem 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  container-type: inline-size;
  container-name: layout-root;
}

img,
svg,
video {
  max-width: 100%;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nps-font-display);
  font-weight: var(--nps-fw-bold);
  letter-spacing: var(--nps-tracking-display);
  line-height: var(--nps-lh-tight);
  color: var(--nps-ink-strong);
  margin: 0 0 var(--nps-space-3);
}

h1 { font-size: var(--nps-fs-display-2); font-variation-settings: "opsz" 72; text-transform: capitalize;}
h2 { font-size: var(--nps-fs-display-3); font-variation-settings: "opsz" 48; }
h3 { font-size: var(--nps-fs-headline); }
h4 { font-size: var(--nps-fs-title); }
h5, h6 { font-size: var(--nps-fs-body); }

p { margin: 0 0 var(--nps-space-2); }

a {
  color: var(--nps-accent-strong);
  text-underline-offset: 0.15em;
}

a:hover { color: var(--nps-accent-press); }

code,
kbd,
samp {
  font-family: var(--nps-font-mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border-radius: var(--nps-radius-xs);
  background: var(--nps-surface-inset);
  border: 1px solid var(--nps-border);
}

pre {
  font-family: var(--nps-font-mono);
  font-size: var(--nps-fs-caption);
  line-height: var(--nps-lh-snug);
  background: var(--nps-surface-inset);
  border: 1px solid var(--nps-border);
  border-radius: var(--nps-radius-md);
  padding: var(--nps-space-4);
  overflow: auto;
}

blockquote {
  margin: 0 0 var(--nps-space-4);
  padding: var(--nps-space-3) var(--nps-space-4);
  border-left: 2px solid var(--nps-accent);
  background: var(--nps-surface);
  color: var(--nps-ink-muted);
}

:focus-visible {
  outline: 2px solid var(--nps-focus-outline);
  outline-offset: 2px;
}

::selection {
  background: var(--nps-selection-bg);
  color: var(--nps-selection-fg);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--nps-scrollbar-thumb) var(--nps-scrollbar-track);
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--nps-scrollbar-track); }
*::-webkit-scrollbar-thumb {
  background: var(--nps-scrollbar-thumb);
  border: 2px solid var(--nps-scrollbar-track);
  border-radius: var(--nps-radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--nps-scrollbar-thumb-hover); }

.nps-eyebrow {
  display: block;
  font-family: var(--nps-font-mono);
  font-size: var(--nps-fs-micro);
  font-weight: var(--nps-fw-medium);
  letter-spacing: var(--nps-tracking-caps);
  text-transform: uppercase;
  color: var(--nps-ink-muted);
  margin: 0;
}

.nps-mono { font-family: var(--nps-font-mono); font-variant-numeric: tabular-nums; }
.nps-display { font-family: var(--nps-font-display); letter-spacing: var(--nps-tracking-display); }
.nps-numeral {
  font-family: var(--nps-font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--nps-fw-bold);
  letter-spacing: var(--nps-tracking-tight);
}

.nps-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}