/* ============================================================
   SAINT BONES — FOUNDATION
   Reset · document · typography primitives · controls · states
   Requires sb-tokens.css. Foundation only — no page components.
   ============================================================ */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sb-color-bg);
  color: var(--sb-color-text);
  font-family: var(--sb-family-sans);
  font-weight: var(--sb-weight-light);
  font-size: var(--sb-fs-15);
  line-height: var(--sb-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-wrap: pretty;
}

/* Dark ground is a document-level mode, not a per-component override. */
body[data-sb-ground="inverse"] {
  background: var(--sb-color-bg-inverse);
  color: var(--sb-color-text-inverse-body);
}

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

h1, h2, h3, h4, h5, h6, p, figure, dl, dd, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }

/* ---------- LINKS -------------------------------------------- */
a { color: inherit; text-decoration: none; transition: var(--sb-transition-link); }
a:hover { color: var(--sb-color-accent-metal); }
body[data-sb-ground="inverse"] a:hover { color: var(--sb-color-accent-metal); }

/* ---------- FOCUS ------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: var(--sb-focus-ring-width) solid var(--sb-color-focus);
  outline-offset: var(--sb-focus-ring-offset);
}

/* ---------- NAMED TEXT STYLES ------------------------------- */
/* Every piece of copy uses one of these. No ad-hoc font shorthand. */
.sb-hero {
  font-family: var(--sb-family-sans);
  font-weight: var(--sb-weight-light);
  font-stretch: var(--sb-width-condensed);
  font-size: var(--sb-type-hero);
  line-height: var(--sb-lh-display);
  letter-spacing: var(--sb-ls-hero);
}
/* Mobile heroes are separately authored at 390px, not the low end of
   the desktop clamp. Three named treatments, exact values only. */
.sb-hero--statement { font-size: var(--sb-type-hero-mobile-statement); line-height: var(--sb-lh-hero); }
.sb-hero--single { font-size: var(--sb-type-hero-mobile-single); line-height: 0.88; }
.sb-hero--page { font-size: var(--sb-type-hero-mobile-page); line-height: var(--sb-lh-hero); }
.sb-display {
  font-weight: var(--sb-weight-light);
  font-size: var(--sb-type-display);
  line-height: 1.02;
  letter-spacing: var(--sb-ls-display);
}
.sb-h1 {
  font-weight: var(--sb-weight-light);
  font-size: var(--sb-type-h1);
  line-height: 1.04;
  letter-spacing: var(--sb-ls-display);
}
.sb-h2 {
  font-weight: var(--sb-weight-light);
  font-size: var(--sb-type-h2);
  line-height: 1.06;
  letter-spacing: var(--sb-ls-heading);
}
.sb-h3 {
  font-weight: var(--sb-weight-light);
  font-size: var(--sb-type-h3);
  line-height: var(--sb-lh-heading);
  letter-spacing: var(--sb-ls-heading);
}
.sb-h4 {
  font-weight: var(--sb-weight-regular);
  font-size: var(--sb-type-h4);
  line-height: 1.2;
  letter-spacing: var(--sb-ls-tight);
}
/* The serif is an editorial accent only: hero counter-lines, pull
   statements, "Back to <collection>" bands. Never UI, never body. */
.sb-editorial {
  font-family: var(--sb-family-serif);
  font-weight: var(--sb-weight-regular);
  font-size: var(--sb-type-editorial);
  line-height: 1.08;
  letter-spacing: var(--sb-ls-serif);
}
.sb-body-lg { font-weight: var(--sb-weight-light); font-size: var(--sb-fs-16); line-height: var(--sb-lh-long); }
.sb-body { font-weight: var(--sb-weight-light); font-size: var(--sb-fs-15); line-height: var(--sb-lh-relaxed); }
.sb-body-sm { font-weight: var(--sb-weight-light); font-size: var(--sb-fs-14); line-height: var(--sb-lh-body); }
.sb-caption { font-weight: var(--sb-weight-light); font-size: var(--sb-fs-12); line-height: var(--sb-lh-body); color: var(--sb-color-text-muted); }
.sb-technical { font-weight: var(--sb-weight-light); font-size: var(--sb-fs-14); line-height: var(--sb-lh-body); }

.sb-product-name { font-weight: var(--sb-weight-regular); font-size: var(--sb-type-product-name); line-height: var(--sb-lh-snug); letter-spacing: var(--sb-ls-serif); }
.sb-product-name--list { font-size: var(--sb-type-product-name-list); }
.sb-price { font-weight: var(--sb-weight-light); font-size: var(--sb-fs-20); line-height: 1.2; }

.sb-eyebrow, .sb-label, .sb-nav-text, .sb-btn-text, .sb-form-label {
  font-weight: var(--sb-weight-regular);
  line-height: var(--sb-lh-display);
  text-transform: uppercase;
}
.sb-eyebrow { font-size: var(--sb-fs-10); letter-spacing: 0.28em; }
.sb-label { font-size: var(--sb-fs-9); letter-spacing: var(--sb-ls-label); color: var(--sb-color-text-label); }
.sb-nav-text { font-size: var(--sb-type-nav); letter-spacing: var(--sb-ls-ui); }
.sb-nav-text--drawer { font-size: var(--sb-type-nav-drawer); letter-spacing: var(--sb-ls-control); }
.sb-nav-text--compact { font-size: var(--sb-type-nav-mobile); letter-spacing: var(--sb-ls-nav); }
.sb-btn-text { font-size: var(--sb-fs-11); letter-spacing: var(--sb-ls-eyebrow); }
.sb-form-label { font-size: var(--sb-fs-9); letter-spacing: var(--sb-ls-eyebrow); color: var(--sb-color-text-label); }

.sb-wordmark {
  font-weight: var(--sb-weight-medium);
  font-stretch: var(--sb-width-wider);
  font-size: var(--sb-fs-16);
  letter-spacing: var(--sb-ls-wordmark);
  text-transform: uppercase;
}

/* Diamond+rule eyebrow ornament — the one decorative motif allowed
   in UI. Fine-line only; never a filled or gothic flourish. */
.sb-eyebrow--marked { display: inline-flex; align-items: center; gap: var(--sb-space-5); }
.sb-eyebrow--marked::before {
  content: ""; flex: none;
  width: var(--sb-diamond); height: var(--sb-diamond);
  background: currentColor; transform: rotate(45deg); opacity: 0.75;
}
.sb-eyebrow--marked::after {
  content: ""; flex: none;
  width: 26px; height: var(--sb-border-hairline);
  background: currentColor; opacity: 0.35;
}

/* ---------- DIVIDER ---------------------------------------- */
.sb-rule { border: 0; border-top: var(--sb-border-hairline) solid var(--sb-color-border); }
.sb-rule--strong { border-top-color: var(--sb-color-border-strong); }
body[data-sb-ground="inverse"] .sb-rule { border-top-color: var(--sb-color-border-inverse); }

/* ---------- BUTTONS ---------------------------------------- */
/* Three tiers only: solid, outline, text. No fourth variant. */
.sb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sb-space-5);
  min-height: var(--sb-control-height-md);
  padding: var(--sb-cta-pad-y) var(--sb-space-16);
  border: var(--sb-border-hairline) solid transparent;
  border-radius: var(--sb-radius-none);
  background: transparent;
  font-family: var(--sb-family-sans);
  font-weight: var(--sb-weight-regular);
  font-size: var(--sb-fs-11);
  letter-spacing: var(--sb-ls-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--sb-transition-control);
}
.sb-btn--block { width: 100%; }

.sb-btn--solid { background: var(--sb-color-border-strong); border-color: var(--sb-color-border-strong); color: var(--sb-color-text-inverse); }
.sb-btn--solid:hover { background: var(--sb-ink-700); border-color: var(--sb-ink-700); }
.sb-btn--outline { border-color: var(--sb-color-border-strong); color: var(--sb-color-text); }
.sb-btn--outline:hover { background: var(--sb-color-border-strong); color: var(--sb-color-text-inverse); }
.sb-btn--text {
  min-height: auto; padding: 0 0 var(--sb-space-3);
  border: 0; border-bottom: var(--sb-border-hairline) solid var(--sb-color-border-control);
  letter-spacing: var(--sb-ls-control); color: var(--sb-color-text);
}
.sb-btn--text:hover { border-bottom-color: var(--sb-color-border-strong); }

body[data-sb-ground="inverse"] .sb-btn--solid { background: var(--sb-color-text-inverse); border-color: var(--sb-color-text-inverse); color: var(--sb-color-bg-inverse); }
body[data-sb-ground="inverse"] .sb-btn--solid:hover { background: var(--sb-color-accent-metal); border-color: var(--sb-color-accent-metal); }
body[data-sb-ground="inverse"] .sb-btn--outline { border-color: var(--sb-color-border-inverse-cta); color: var(--sb-color-text-inverse); }
body[data-sb-ground="inverse"] .sb-btn--outline:hover { background: var(--sb-color-text-inverse); color: var(--sb-color-bg-inverse); }
body[data-sb-ground="inverse"] .sb-btn--text { border-bottom-color: var(--sb-color-border-inverse-control); color: var(--sb-color-text-inverse-secondary); }

.sb-btn[disabled], .sb-btn[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--sb-color-text-muted);
  border-color: var(--sb-color-border-subtle);
  background: transparent;
}
body[data-sb-ground="inverse"] .sb-btn[disabled],
body[data-sb-ground="inverse"] .sb-btn[aria-disabled="true"] {
  color: var(--sb-color-text-disabled-inverse);
  border-color: var(--sb-color-border-inverse);
}

/* ---------- FORM CONTROLS ---------------------------------- */
.sb-field { display: flex; flex-direction: column; gap: var(--sb-space-4); }

.sb-input, .sb-select, .sb-textarea {
  width: 100%;
  min-height: var(--sb-control-height-md);
  padding: var(--sb-space-7) var(--sb-space-6);
  background: transparent;
  border: var(--sb-border-hairline) solid var(--sb-color-border-control);
  border-radius: var(--sb-radius-none);
  color: var(--sb-color-text);
  font-family: var(--sb-family-sans);
  font-weight: var(--sb-weight-light);
  font-size: var(--sb-fs-15);
  transition: border-color var(--sb-duration-fast) var(--sb-ease-standard);
}
.sb-input:focus, .sb-select:focus, .sb-textarea:focus { border-color: var(--sb-color-border-strong); }
.sb-input::placeholder, .sb-textarea::placeholder { color: var(--sb-color-text-muted); }

body[data-sb-ground="inverse"] .sb-input,
body[data-sb-ground="inverse"] .sb-select,
body[data-sb-ground="inverse"] .sb-textarea {
  border-color: var(--sb-color-border-inverse-control);
  color: var(--sb-color-text-inverse);
}
body[data-sb-ground="inverse"] .sb-input:focus { border-color: var(--sb-color-text-inverse); }

.sb-input[aria-invalid="true"] { border-color: var(--sb-color-error); }
body[data-sb-ground="inverse"] .sb-input[aria-invalid="true"] { border-color: var(--sb-color-error-inverse); }

.sb-field-error {
  font-size: var(--sb-fs-12);
  line-height: var(--sb-lh-body);
  color: var(--sb-color-error);
}
body[data-sb-ground="inverse"] .sb-field-error { color: var(--sb-color-error-inverse); }

.sb-input[disabled], .sb-select[disabled] {
  color: var(--sb-color-text-muted);
  border-color: var(--sb-color-border-subtle);
  cursor: not-allowed;
}

/* ---------- SELECTOR (product option) ---------------------- */
.sb-option {
  display: flex; align-items: center; gap: var(--sb-space-5);
  min-height: var(--sb-control-height-md);
  padding: var(--sb-space-7);
  background: transparent;
  border: var(--sb-border-hairline) solid var(--sb-color-border-control);
  border-radius: var(--sb-radius-none);
  font-family: var(--sb-family-sans);
  font-weight: var(--sb-weight-regular);
  font-size: var(--sb-fs-11);
  letter-spacing: var(--sb-ls-ui);
  color: var(--sb-color-text);
  cursor: pointer;
  transition: var(--sb-transition-control);
}
.sb-option[aria-pressed="true"], .sb-option[data-selected="true"] {
  border-color: var(--sb-color-border-strong);
  background: var(--sb-color-border-strong);
  color: var(--sb-color-text-inverse);
}
.sb-option[aria-disabled="true"] {
  color: var(--sb-color-text-muted);
  border-color: var(--sb-color-border-subtle);
  text-decoration: line-through;
  cursor: not-allowed;
}
body[data-sb-ground="inverse"] .sb-option {
  border-color: var(--sb-color-border-inverse-control);
  color: var(--sb-color-text-inverse-body);
}
body[data-sb-ground="inverse"] .sb-option[aria-pressed="true"],
body[data-sb-ground="inverse"] .sb-option[data-selected="true"] {
  border-color: var(--sb-color-text-inverse);
  background: var(--sb-color-text-inverse);
  color: var(--sb-color-bg-inverse);
}
body[data-sb-ground="inverse"] .sb-option[aria-disabled="true"] {
  color: var(--sb-color-text-disabled-inverse);
  border-color: var(--sb-color-border-inverse);
}
.sb-option__swatch {
  flex: none;
  width: var(--sb-swatch); height: var(--sb-swatch);
  transform: rotate(45deg);
}

/* ---------- MEDIA FRAME ------------------------------------ */
.sb-media { position: relative; overflow: hidden; background: var(--sb-color-surface-media); }
body[data-sb-ground="inverse"] .sb-media { background: var(--sb-color-surface-media-inverse); }
.sb-media > img { width: 100%; height: 100%; object-fit: cover; transition: var(--sb-transition-media); }
.sb-media--contain > img { object-fit: contain; padding: var(--sb-space-5); }
.sb-media--square { aspect-ratio: var(--sb-ratio-square); }
.sb-media--product { aspect-ratio: var(--sb-ratio-product); }
.sb-media--portrait { aspect-ratio: var(--sb-ratio-portrait); }
.sb-media--landscape { aspect-ratio: var(--sb-ratio-landscape); }
.sb-media--banner { aspect-ratio: var(--sb-ratio-banner); }
a:hover > .sb-media > img, .sb-media--zoom:hover > img { transform: scale(var(--sb-media-hover-scale)); }

.sb-scrim { position: absolute; inset: 0; background: var(--sb-overlay-hero); pointer-events: none; }
.sb-scrim--band { background: var(--sb-overlay-band); }

/* ---------- UTILITIES ------------------------------------- */
.sb-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sb-no-scrollbar { scrollbar-width: none; }
.sb-no-scrollbar::-webkit-scrollbar { display: none; }
.sb-rail {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sb-rail::-webkit-scrollbar { display: none; }
.sb-rail > * { scroll-snap-align: start; }

/* ---------- REDUCED MOTION -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .sb-media > img { transform: none !important; }
}

/* ---------- MOBILE TYPE CLOSURE ---------------------------
   Exact mobile values. Never pick a number from a range. */
@media (max-width: 767px) {
  .sb-display { font-size: var(--sb-type-display-mobile); }
  .sb-h1 { font-size: var(--sb-type-h1-mobile); }
  .sb-h2 { font-size: var(--sb-type-h2-mobile); }
  .sb-h3 { font-size: var(--sb-type-h3-mobile); }
  .sb-h4 { font-size: var(--sb-type-h4-mobile); }
  .sb-editorial { font-size: var(--sb-type-editorial-mobile); }
  .sb-product-name { font-size: var(--sb-type-product-name-mobile); }
  .sb-product-name--list { font-size: var(--sb-type-product-name-list); }
  .sb-nav-text { font-size: var(--sb-type-nav-mobile); letter-spacing: var(--sb-ls-nav); }
  .sb-wordmark { font-size: var(--sb-fs-13); }
}