/* =============================================================================
   PEARL VEIL — BASE STYLES & TYPOGRAPHY
   ─────────────────────────────────────────────────────────────────────────────
   Global body styles, font imports, type system, and universal utilities.
   ============================================================================= */

/* ─── FONT IMPORTS ────────────────────────────────────────────────────────────
   Cormorant Garamond: editorial serif for headings — elegant, high-fashion feel
   Jost: clean geometric sans for body — modern, highly readable
   TO REPLACE: swap these @import URLs for your chosen fonts
----------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

/* ─── GLOBAL BODY ─────────────────────────────────────────────────────────────  */

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--color-body);
  background-color: var(--color-bg);
  transition: background-color var(--dur-slow) var(--ease-out),
              color var(--dur-slow) var(--ease-out);
}

/* Prevent layout shift from scrollbar appearing */
html {
  overflow-y: scroll;
}

/* ─── DISPLAY / HEADING STYLES ────────────────────────────────────────────────
   Using Cormorant Garamond for all display text.
   Headings are semantic (h1-h6) but styled via class to decouple structure from style.
----------------------------------------------------------------------------- */

.display-1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}

.display-2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 4.5vw, var(--text-4xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}

.heading-1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
}

.heading-2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

.heading-3 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-base), 2vw, var(--text-xl));
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  color: var(--color-heading);
}

/* ─── BODY TEXT UTILITIES ─────────────────────────────────────────────────────  */

.text-lead {
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
}

.text-body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-body);
}

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

/* Eyebrow / overline label above section headings */
.text-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent);
}

/* ─── SECTION HEADER PATTERN ──────────────────────────────────────────────────
   Reused across homepage sections: eyebrow + heading + optional subtext
----------------------------------------------------------------------------- */

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto var(--space-12);
}

.section-header .text-eyebrow {
  display: block;
  margin-bottom: var(--space-3);
}

.section-header .section-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3.5vw, var(--text-3xl));
  font-weight: var(--weight-light);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--color-heading);
  margin-bottom: var(--space-4);
}

.section-header .section-subtitle {
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
}

/* ─── LINKS ───────────────────────────────────────────────────────────────────  */

.link {
  color: var(--color-accent);
  transition: var(--transition-color);
  position: relative;
}

.link:hover {
  color: var(--color-accent-dark);
}

.link-underline {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-base) var(--ease-out);
}

.link-underline:hover {
  text-decoration-color: currentColor;
}

/* ─── DIVIDERS ────────────────────────────────────────────────────────────────  */

.divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
  border: none;
}

.divider-accent {
  width: 48px;
  height: 1px;
  background-color: var(--color-accent);
  border: none;
  margin: var(--space-4) auto;
}

/* ─── SELECTION ───────────────────────────────────────────────────────────────  */

::selection {
  background-color: var(--color-accent-pale);
  color: var(--color-heading);
}

/* ─── SCROLLBAR ───────────────────────────────────────────────────────────────  */

::-webkit-scrollbar {
  width: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: var(--radius-full);
}

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

/* ─── GLOBAL IMAGE PLACEHOLDER ────────────────────────────────────────────────
   Shown while images load or when src is a placeholder
----------------------------------------------------------------------------- */

.img-placeholder {
  background: linear-gradient(
    135deg,
    var(--color-ivory-alt) 0%,
    var(--color-ivory-border) 50%,
    var(--color-ivory-alt) 100%
  );
  background-size: 200% 200%;
  animation: shimmer 1.8s ease-in-out infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0%; }
  100% { background-position: -200% 0%; }
}

/* ─── BACK TO TOP ─────────────────────────────────────────────────────────────  */

#back-to-top {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  width: 44px;
  height: 44px;
  background-color: var(--color-heading);
  color: var(--color-ivory);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: all var(--dur-base) var(--ease-out);
  z-index: var(--z-raised);
  box-shadow: var(--shadow-md);
}

#back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top:hover {
  background-color: var(--color-accent);
  transform: translateY(-2px);
}

#back-to-top svg {
  width: 18px;
  height: 18px;
}

/* ─── LOADING SCREEN ──────────────────────────────────────────────────────────  */

#page-loader {
  position: fixed;
  inset: 0;
  background-color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-toast);
  transition: opacity var(--dur-slow) var(--ease-out);
}

#page-loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader-wordmark {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-widest);
  color: var(--color-heading);
  animation: loaderPulse 1.5s ease-in-out infinite;
}

@keyframes loaderPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* ─── SHARED FORM VALIDATION UTILITIES ───────────────────────────────────────
   Used across checkout, contact, account, and any page with validated forms.
   Defined here in base.css so every page has access regardless of which
   page-specific CSS it loads.
----------------------------------------------------------------------------- */

.field-error {
  font-size: var(--text-xs);
  color: var(--color-error);
  margin-top: var(--space-1);
  display: none;
  line-height: var(--leading-normal);
}

.field-error.visible {
  display: block;
}

.form-input.error,
.form-select.error,
.form-textarea.error {
  border-color: var(--color-error);
  box-shadow: 0 0 0 3px var(--color-error-bg);
}

.required {
  color: var(--color-accent);
  margin-left: 1px;
}


/* ─── SKIP NAVIGATION LINK (Accessibility) ────────────────────────────────────
   Visually hidden until focused via keyboard. First focusable element on page.
----------------------------------------------------------------------------- */

.skip-nav-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: calc(var(--z-top) + 10);
  background-color: var(--color-heading);
  color: var(--color-ivory);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  transition: top var(--dur-fast);
  outline: none;
}

.skip-nav-link:focus {
  top: var(--space-4);
}