/* ============================================================
   SABLE — base.css
   Reset, typography defaults, global styles
   Version 1.0 | Brand: Sable | myjoyroom.com (interim)

   IMPORT ORDER — every page must load CSS in this order:
   1. tokens.css   ← variables
   2. base.css     ← this file
   3. layout.css   ← grid, nav, footer
   4. components.css ← buttons, cards, inputs
   ============================================================ */

/* ----------------------------------------------------------
   RESET
---------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-black);
  color: var(--color-ivory);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: var(--leading-loose);
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

svg {
  display: block;
}

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

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

/* ----------------------------------------------------------
   TYPOGRAPHY — Headings
   All headings use Cormorant Garamond
   All headings are lightweight (300) by default
---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  color: var(--color-ivory);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
}

h1 {
  font-size: var(--text-h1);
}

h2 {
  font-size: var(--text-h2);
}

h3 {
  font-size: var(--text-h3);
}

h4 {
  font-size: var(--text-h4);
  letter-spacing: 0;
}

/* ----------------------------------------------------------
   TYPOGRAPHY — Body & running text
   Body copy always uses --color-ivory-muted (never ivory or rgba)
---------------------------------------------------------- */
p {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  color: var(--color-ivory);
  line-height: var(--leading-loose);
  letter-spacing: 0.03em;
  max-width: var(--max-width-text);
}

/* Remove max-width when inside a constrained container */
.p-full { max-width: none; }

strong {
  font-weight: var(--weight-medium);
  color: var(--color-ivory);
}

em {
  font-style: italic;
  color: var(--color-ivory);
}

/* ----------------------------------------------------------
   TYPOGRAPHY — Utility text classes
---------------------------------------------------------- */

/* Eyebrow — small uppercase label above a heading */
.text-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: var(--weight-light);
  color: var(--color-ivory-faint);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-normal);
}

/* Label — UI labels, form labels, nav links */
.text-label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-light);
  color: var(--color-ivory-muted);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--leading-normal);
}

/* Caption — small supporting text */
.text-caption {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-light);
  color: var(--color-ivory-faint);
  letter-spacing: 0.04em;
  line-height: var(--leading-normal);
}

/* Price — product pricing */
.text-price {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-light);
  color: var(--color-gold);
  letter-spacing: var(--tracking-wide);
}

/* Maker name — small brand attribution */
.text-maker {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: var(--weight-light);
  color: var(--color-ivory-faint);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

/* Gold accent text */
.text-gold {
  color: var(--color-gold);
}

/* Muted text */
.text-muted {
  color: var(--color-ivory-muted);
}

/* Faint text */
.text-faint {
  color: var(--color-ivory-faint);
}

/* ----------------------------------------------------------
   TYPOGRAPHY — Pull quote (Journal articles)
---------------------------------------------------------- */
blockquote {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-light);
  font-style: italic;
  color: var(--color-ivory);
  line-height: var(--leading-snug);
  letter-spacing: 0.01em;
  border-left: var(--border-gold);
  padding-left: var(--space-6);
  margin: var(--space-7) 0;
}

/* ----------------------------------------------------------
   LINKS
---------------------------------------------------------- */
.link-underline {
  color: var(--color-ivory-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(232,224,212,0.25);
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}

.link-underline:hover {
  color: var(--color-ivory);
  text-decoration-color: rgba(232,224,212,0.6);
}

.link-gold {
  color: var(--color-gold);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(201,169,122,0.35);
  transition: color var(--duration-fast) var(--ease-out);
}

.link-gold:hover {
  color: var(--color-gold-light);
}

/* ----------------------------------------------------------
   DIVIDERS
---------------------------------------------------------- */
hr {
  border: none;
  border-top: var(--border-hair);
  margin: var(--space-7) 0;
}

.divider-subtle { border-top: var(--border-subtle); }
.divider-visible { border-top: var(--border-visible); }
.divider-gold { border-top: var(--border-gold); }

/* ----------------------------------------------------------
   FOCUS STYLES — Accessibility
   Never remove focus outlines — restyle them instead
---------------------------------------------------------- */
:focus-visible {
  outline: var(--border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------
   SELECTION
---------------------------------------------------------- */
::selection {
  background: rgba(201,169,122,0.25);
  color: var(--color-ivory);
}

/* ----------------------------------------------------------
   SCROLLBAR (webkit)
---------------------------------------------------------- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-black-soft);
}

::-webkit-scrollbar-thumb {
  background: var(--color-ivory-faint);
  border-radius: var(--radius-pill);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-ivory-muted);
}

/* ----------------------------------------------------------
   UTILITY — Layout helpers
---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container-text {
  width: 100%;
  max-width: var(--max-width-text);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container-narrow {
  width: 100%;
  max-width: var(--max-width-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.section-sm {
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(2rem, 4vw, 4rem);
}

/* ----------------------------------------------------------
   UTILITY — Visibility
---------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.hidden { display: none; }

/* ----------------------------------------------------------
   UTILITY — Flex & grid shorthands
---------------------------------------------------------- */
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ----------------------------------------------------------
   MOTION — Page entry animation
   Elements with .reveal class animate in on load / scroll
---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered children — add delay via --delay custom property */
  .reveal-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--duration-slower) var(--ease-out),
                transform var(--duration-slower) var(--ease-out);
  }

  .reveal-stagger.visible > *:nth-child(1) { transition-delay: 0ms;   opacity: 1; transform: translateY(0); }
  .reveal-stagger.visible > *:nth-child(2) { transition-delay: 100ms; opacity: 1; transform: translateY(0); }
  .reveal-stagger.visible > *:nth-child(3) { transition-delay: 200ms; opacity: 1; transform: translateY(0); }
  .reveal-stagger.visible > *:nth-child(4) { transition-delay: 300ms; opacity: 1; transform: translateY(0); }
  .reveal-stagger.visible > *:nth-child(5) { transition-delay: 400ms; opacity: 1; transform: translateY(0); }
  .reveal-stagger.visible > *:nth-child(6) { transition-delay: 500ms; opacity: 1; transform: translateY(0); }

}

/* Fallback — no animation if reduced motion preferred */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----------------------------------------------------------
   CORNER MARKS
   Decorative gold corner details for hero images and
   featured areas only. Never use on small elements.
---------------------------------------------------------- */
.corner-marks {
  position: relative;
}

.corner-marks::before,
.corner-marks::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(201,169,122,0.45);
  border-style: solid;
  pointer-events: none;
  z-index: var(--z-raised);
}

.corner-marks::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}

.corner-marks::after {
  top: -1px;
  right: -1px;
  border-width: 1px 1px 0 0;
}

/* Bottom corners via data attribute */
.corner-marks[data-corners="all"]::before { border-width: 1px 0 0 1px; }
.corner-marks[data-corners="all"]::after  { border-width: 1px 1px 0 0; }

.corner-marks-bottom {
  position: relative;
}
.corner-marks-bottom::before,
.corner-marks-bottom::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-color: rgba(201,169,122,0.45);
  border-style: solid;
  pointer-events: none;
}
.corner-marks-bottom::before {
  bottom: -1px;
  left: -1px;
  border-width: 0 0 1px 1px;
}
.corner-marks-bottom::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 1px 1px 0;
}