/* ============================================================
   SABLE — design tokens  ·  LIGHT
   ------------------------------------------------------------
   ⚠️ Dawn pins `html { font-size: 62.5% }`, so 1rem = 10px.
   Every rem value below is authored against a 10px root.
   Do NOT "correct" these to a 16px scale.

   Token names are ROLES, not colours. `--sbl-ink` is always the
   page ground and `--sbl-paper` is always the primary text —
   the values flipped when the store went light, the roles did not.
   ============================================================ */

:root {
  /* --- Ground & surface --------------------------------- */
  --sbl-ink:        #FBFAF8;   /* page ground — warm off-white, not stark #fff */
  --sbl-raise:      #FFFFFF;   /* cards, drawer, raised surfaces */
  --sbl-raise-2:    #F4F2EE;   /* hover state on raised surfaces */
  --sbl-line:       #E6E3DC;   /* hairlines, dividers */
  --sbl-line-soft:  #F0EEE9;   /* barely-there separation */

  /* --- Type -------------------------------------------- */
  --sbl-paper:      #16150F;   /* primary text, inverted buttons */
  --sbl-mute:       #6B6862;   /* secondary text, metadata — 5.5:1 on ground */
  --sbl-faint:      #9A968E;   /* disabled, tertiary */

  /* --- Signal ------------------------------------------- */
  /* A pale gold is invisible on white. The accent is a deep bronze
     so it still passes contrast as text, and is used sparingly. */
  --sbl-signal:     #7A5C24;
  --sbl-signal-dim: #A98D4F;
  --sbl-alert:      #9E2B26;   /* low stock, errors */
  --sbl-good:       #2F6B45;   /* in stock, success */

  /* --- Typography --------------------------------------- */
  --sbl-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
              "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Type scale — 10px root. */
  --sbl-t-display: 4.4rem;
  --sbl-t-h1:      3.0rem;
  --sbl-t-h2:      2.2rem;
  --sbl-t-h3:      1.7rem;
  --sbl-t-body:    1.5rem;
  --sbl-t-small:   1.3rem;
  --sbl-t-micro:   1.1rem;

  --sbl-lh-tight:  1.12;
  --sbl-lh-snug:   1.35;
  --sbl-lh-body:   1.6;

  --sbl-ls-display: -0.02em;
  --sbl-ls-body:     0;
  --sbl-ls-label:    0.14em;

  /* --- Space -------------------------------------------- */
  --sbl-s-1:  0.4rem;
  --sbl-s-2:  0.8rem;
  --sbl-s-3:  1.2rem;
  --sbl-s-4:  1.6rem;
  --sbl-s-5:  2.4rem;
  --sbl-s-6:  3.2rem;
  --sbl-s-7:  4.8rem;
  --sbl-s-8:  6.4rem;
  --sbl-s-9:  9.6rem;

  /* Section rhythm — more generous than the dark build. A light
     store reads as cluttered far sooner than a dark one, so the
     air is deliberately increased. */
  --sbl-section-y:        7.2rem;
  --sbl-section-y-lg:     11.2rem;
  --sbl-gutter:           2.0rem;
  --sbl-gutter-lg:        4.8rem;
  --sbl-maxw:           150rem;
  --sbl-maxw-text:       66rem;

  /* --- Form -------------------------------------------- */
  --sbl-radius:      0;      /* SABLE is square. No rounded corners. */
  --sbl-radius-pill: 999px;  /* pills only, for stock/condition chips */
  --sbl-border:      1px solid var(--sbl-line);

  /* --- Motion ------------------------------------------- */
  --sbl-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --sbl-dur-fast:  120ms;
  --sbl-dur:       220ms;
  --sbl-dur-slow:  420ms;

  /* --- Depth ------------------------------------------- */
  /* On white, real shadows finally read. Keep them near-invisible:
     luxury retail uses hairlines, not drop shadows. */
  --sbl-shadow:    0 1px 0 var(--sbl-line);
  --sbl-shadow-lg: 0 24px 60px rgba(22, 21, 15, 0.10);

  /* --- Z ------------------------------------------------ */
  --sbl-z-header:  100;
  --sbl-z-sticky:  90;
  --sbl-z-drawer:  200;
  --sbl-z-modal:   300;
}

@media (min-width: 750px) {
  :root {
    --sbl-t-display: 6.4rem;
    --sbl-t-h1:      4.0rem;
    --sbl-t-h2:      2.8rem;
    --sbl-t-body:    1.6rem;
    --sbl-gutter:    var(--sbl-gutter-lg);
  }
}

/* ============================================================
   Dawn reset overrides
   ============================================================ */

/* Dawn sets body text to 75% opacity via rgba(--color-foreground, 0.75),
   which silently fails contrast. Force solid. */
body,
.color-scheme-1, .color-scheme-2, .color-scheme-3,
.color-scheme-4, .color-scheme-5 {
  color: var(--sbl-paper);
  background-color: var(--sbl-ink);
}

body {
  font-family: var(--sbl-font);
  font-size: var(--sbl-t-body);
  line-height: var(--sbl-lh-body);
  letter-spacing: var(--sbl-ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dawn ships serif heading families via settings; SABLE is grotesk only.
   Editorial/print styling is explicitly out of scope. */
h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--sbl-font);
  font-weight: 500;
  line-height: var(--sbl-lh-tight);
  letter-spacing: var(--sbl-ls-display);
  color: var(--sbl-paper);
}

a { color: inherit; }

/* ============================================================
   Shared primitives — every section uses these, nothing
   redefines them locally.
   ============================================================ */

.sbl-wrap {
  max-width: var(--sbl-maxw);
  margin-inline: auto;
  padding-inline: var(--sbl-gutter);
}

.sbl-section { padding-block: var(--sbl-section-y); }
@media (min-width: 750px) {
  .sbl-section { padding-block: var(--sbl-section-y-lg); }
}

/* Eyebrow / label — wide-tracked small caps. */
.sbl-label {
  font-size: var(--sbl-t-micro);
  letter-spacing: var(--sbl-ls-label);
  text-transform: uppercase;
  color: var(--sbl-mute);
  font-weight: 500;
}

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

/* --- Buttons ------------------------------------------- */
/* Roles inverted for the light store: primary is now dark-on-light. */
.sbl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sbl-s-2);
  min-height: 4.8rem;              /* ≥44px touch target */
  padding: 0 var(--sbl-s-5);
  font: inherit;
  font-size: var(--sbl-t-small);
  font-weight: 600;
  letter-spacing: var(--sbl-ls-label);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--sbl-radius);
  cursor: pointer;
  transition: background var(--sbl-dur) var(--sbl-ease),
              color var(--sbl-dur) var(--sbl-ease),
              border-color var(--sbl-dur) var(--sbl-ease);
}

.sbl-btn--primary {
  background: var(--sbl-paper);
  color: var(--sbl-ink);
}
.sbl-btn--primary:hover { background: #000000; }

.sbl-btn--ghost {
  background: transparent;
  color: var(--sbl-paper);
  border-color: var(--sbl-paper);
}
.sbl-btn--ghost:hover { background: var(--sbl-paper); color: var(--sbl-ink); }

.sbl-btn:disabled,
.sbl-btn[aria-disabled="true"] {
  background: var(--sbl-raise-2);
  color: var(--sbl-faint);
  border-color: var(--sbl-line);
  cursor: not-allowed;
}

/* --- Mobile form fields: never below 16px ---------------
   iOS Safari zooms the whole viewport when you focus an input whose
   font-size is under 16px, and it does NOT zoom back out afterwards. The
   newsletter email field was 13px, so tapping it threw the layout on the
   exact interaction we want to be frictionless. 1.6rem = 16px at the 10px
   root. Applies to text entry only — buttons and labels are unaffected. */
@media (max-width: 749px) {
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 1.6rem;
  }
}

/* --- Focus: visible, always. --- */
:focus-visible {
  outline: 2px solid var(--sbl-signal);
  outline-offset: 2px;
}

/* --- Chips (stock / condition / authenticity) ---------- */
.sbl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sbl-s-1);
  padding: 0.4rem 1.0rem;
  font-size: var(--sbl-t-micro);
  letter-spacing: var(--sbl-ls-label);
  text-transform: uppercase;
  border: 1px solid var(--sbl-line);
  border-radius: var(--sbl-radius-pill);
  color: var(--sbl-mute);
  background: var(--sbl-raise);
}
.sbl-chip--good  { color: var(--sbl-good);  border-color: rgba(47,107,69,0.30); }
.sbl-chip--alert { color: var(--sbl-alert); border-color: rgba(158,43,38,0.30); }

/* --- Media --------------------------------------------- */
/* Product shots sit on a faint warm tint, not pure white, so a
   cut-out product photo still reads as a framed object. */
.sbl-media {
  display: block;
  width: 100%;
  background: var(--sbl-raise-2);
  overflow: hidden;
}
.sbl-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Aspect ratios are declared so images never cause layout shift.
   CLS of 0 is a hard target. */
.sbl-media--portrait { aspect-ratio: 3 / 4; }
.sbl-media--square   { aspect-ratio: 1 / 1; }
.sbl-media--wide     { aspect-ratio: 16 / 9; }

/* --- Utility ------------------------------------------- */
.sbl-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}