/* ============================================================
   SABLE — base.css
   Reset, typography defaults, global styles
   Version 2.0 | Brand: Sable | sabledg.com
   Colour direction: C — Pale slate

   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-bg);
  color: var(--color-text);
  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
---------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-light);
  color: var(--color-text);
  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
---------------------------------------------------------- */
p {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  color: var(--color-text);
  line-height: var(--leading-loose);
  letter-spacing: 0.03em;
  max-width: var(--max-width-text);
}

.p-full { max-width: none; }

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

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

/* ----------------------------------------------------------
   TYPOGRAPHY — Utility classes
---------------------------------------------------------- */
.text-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: var(--weight-light);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  line-height: var(--leading-normal);
}

.text-label {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-light);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  line-height: var(--leading-normal);
}

.text-caption {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--weight-light);
  color: var(--color-text-tertiary);
  letter-spacing: 0.04em;
  line-height: var(--leading-normal);
}

.text-price {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-light);
  color: var(--color-accent);
  letter-spacing: var(--tracking-wide);
}

.text-maker {
  font-family: var(--font-body);
  font-size: var(--text-micro);
  font-weight: var(--weight-light);
  color: var(--color-text-tertiary);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
}

.text-accent { color: var(--color-accent); }
.text-gold { color: var(--color-accent); }        /* legacy alias */
.text-muted { color: var(--color-text-secondary); }
.text-faint { color: var(--color-text-tertiary); }

/* ----------------------------------------------------------
   TYPOGRAPHY — Pull quote
---------------------------------------------------------- */
blockquote {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-light);
  font-style: italic;
  color: var(--color-text);
  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-text-secondary);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(28,28,26,0.2);
  transition: color var(--duration-fast) var(--ease-out),
              text-decoration-color var(--duration-fast) var(--ease-out);
}
.link-underline:hover {
  color: var(--color-text);
  text-decoration-color: rgba(28,28,26,0.5);
}

.link-gold {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(154,128,96,0.3);
  transition: color var(--duration-fast) var(--ease-out);
}
.link-gold:hover { color: var(--color-accent-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
---------------------------------------------------------- */
:focus-visible {
  outline: var(--border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------------------
   SELECTION
---------------------------------------------------------- */
::selection {
  background: rgba(154,128,96,0.2);
  color: var(--color-text);
}

/* ----------------------------------------------------------
   SCROLLBAR
---------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-bg-soft); }
::-webkit-scrollbar-thumb { background: var(--color-text-tertiary); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-secondary); }

/* ----------------------------------------------------------
   UTILITY — Layout
---------------------------------------------------------- */
.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 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 — Reveal animations
---------------------------------------------------------- */
@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); }

  .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); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
}

/* ----------------------------------------------------------
   CORNER MARKS
   Decorative accent details for hero and featured areas
---------------------------------------------------------- */
.corner-marks { position: relative; }
.corner-marks::before,
.corner-marks::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(154,128,96,0.4);
  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; }

.corner-marks-bottom { position: relative; }
.corner-marks-bottom::before,
.corner-marks-bottom::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border-color: rgba(154,128,96,0.4);
  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; }