/**
 * Drip of Street — Typography System
 *
 * Editorial luxury streetwear typography scale engineered with responsive clamp()
 * calculations, strict anti-aliasing, and consistent tracking.
 *
 * Headings: Oswald
 * Body: Inter
 */

/* ==========================================================================
   1. ROOT & BODY TYPE DEFINITIONS
   ========================================================================== */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--dos-font-body);
  font-size: clamp(0.925rem, 0.88rem + 0.2vw, 1rem); /* 14.8px -> 16px */
  font-weight: var(--dos-font-weight-regular);
  line-height: var(--dos-leading-normal);
  color: var(--dos-text-primary);
  background-color: var(--dos-bg-body);
  letter-spacing: var(--dos-tracking-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   2. HEADING HIERARCHY
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.dos-heading {
  font-family: var(--dos-font-heading);
  text-transform: uppercase;
  font-weight: var(--dos-font-weight-bold);
  line-height: var(--dos-leading-tight);
  color: var(--dos-text-primary);
  margin-top: 0;
  margin-bottom: var(--dos-space-sm);
  letter-spacing: var(--dos-tracking-wide);
}

/* Level 1: Hero & Grand Campaign Headlines */
h1,
.dos-h1,
.dos-hero-heading {
  font-size: clamp(2.75rem, 2.2rem + 3.8vw, 5.5rem); /* 44px -> 88px */
  letter-spacing: var(--dos-tracking-wide);
  line-height: 0.98;
}

/* Level 2: Primary Section Titles */
h2,
.dos-h2,
.dos-section-heading {
  font-size: clamp(2rem, 1.6rem + 2vw, 3.5rem); /* 32px -> 56px */
  letter-spacing: var(--dos-tracking-wide);
  line-height: 1.05;
}

/* Level 3: Subsection / Card Collections / Lookbook Headers */
h3,
.dos-h3,
.dos-subsection-heading {
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2.25rem); /* 22.4px -> 36px */
  letter-spacing: var(--dos-tracking-wide);
  line-height: 1.15;
}

/* Level 4: Drawer Headers / Modal Titles / Footer Groups */
h4,
.dos-h4 {
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); /* 17.6px -> 21.6px */
  letter-spacing: var(--dos-tracking-wider);
  font-weight: var(--dos-font-weight-semibold);
  line-height: var(--dos-leading-snug);
}

/* Level 5: Filter Titles / Accordion Headers */
h5,
.dos-h5 {
  font-size: 0.95rem;
  letter-spacing: var(--dos-tracking-wider);
  font-weight: var(--dos-font-weight-semibold);
}

/* Level 6: Micro Eyebrows / Drops / Categories */
h6,
.dos-h6,
.dos-eyebrow {
  font-family: var(--dos-font-heading);
  font-size: 0.75rem;
  font-weight: var(--dos-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--dos-tracking-widest);
  color: var(--dos-text-muted);
  line-height: 1;
}

/* ==========================================================================
   3. E-COMMERCE SPECIFIC TYPOGRAPHY
   ========================================================================== */

/* Product Card Title */
.dos-product-title,
.dos-product-title a {
  font-family: var(--dos-font-heading);
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.1rem);
  font-weight: var(--dos-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--dos-tracking-wide);
  line-height: 1.2;
  color: var(--dos-text-primary);
}

/* Product Price Display */
.dos-price,
.dos-product-price {
  font-family: var(--dos-font-heading);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.2rem);
  font-weight: var(--dos-font-weight-bold);
  letter-spacing: var(--dos-tracking-normal);
  color: var(--dos-text-primary);
  line-height: 1;
}

.dos-price-regular {
  color: var(--dos-text-primary);
}

.dos-price-sale {
  color: var(--dos-text-sale);
  margin-left: var(--dos-space-xs);
}

.dos-price-original {
  color: var(--dos-text-muted);
  text-decoration: line-through;
  font-weight: var(--dos-font-weight-regular);
}

/* Navigation Typography */
.dos-nav-link {
  font-family: var(--dos-font-heading);
  font-size: 0.95rem;
  font-weight: var(--dos-font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--dos-tracking-wider);
  color: var(--dos-text-primary);
}

/* Button Typography */
.dos-btn,
button,
input[type="submit"] {
  font-family: var(--dos-font-heading);
  font-size: 0.9rem;
  font-weight: var(--dos-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--dos-tracking-widest);
  line-height: 1;
}

/* Labels and Badges */
.dos-badge,
.dos-label {
  font-family: var(--dos-font-heading);
  font-size: 0.7rem;
  font-weight: var(--dos-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--dos-tracking-widest);
  line-height: 1;
}

/* Captions, Timestamps, Disclaimers */
.dos-caption,
.dos-meta,
figcaption {
  font-size: 0.8rem;
  font-weight: var(--dos-font-weight-regular);
  color: var(--dos-text-muted);
  line-height: var(--dos-leading-snug);
  letter-spacing: var(--dos-tracking-normal);
}

/* ==========================================================================
   4. BODY COPY & PARAGRAPHS
   ========================================================================== */
p {
  margin-top: 0;
  margin-bottom: var(--dos-space-md);
}

p.dos-lead {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  line-height: var(--dos-leading-relaxed);
  color: var(--dos-text-secondary);
  font-weight: var(--dos-font-weight-light);
}

/* Editorial Blockquote */
blockquote,
.dos-quote {
  font-family: var(--dos-font-heading);
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  text-transform: uppercase;
  letter-spacing: var(--dos-tracking-wide);
  line-height: 1.15;
  border-left: 2px solid var(--dos-color-black);
  padding-left: var(--dos-space-lg);
  margin: var(--dos-space-xl) 0;
  color: var(--dos-text-primary);
}

/* ==========================================================================
   5. LINKS & INTERACTIVE STATES
   ========================================================================== */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dos-transition-fast), border-color var(--dos-transition-fast);
}

a:hover {
  color: var(--dos-color-accent);
}

/* Subtle Editorial Underline Link */
.dos-link-editorial {
  display: inline-flex;
  align-items: center;
  gap: var(--dos-space-xs);
  font-family: var(--dos-font-heading);
  font-size: 0.85rem;
  font-weight: var(--dos-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--dos-tracking-widest);
  color: var(--dos-text-primary);
  border-bottom: 1px solid var(--dos-border-strong);
  padding-bottom: 2px;
  transition: all var(--dos-transition-fast);
}

.dos-link-editorial:hover {
  color: var(--dos-color-accent);
  border-bottom-color: var(--dos-color-accent);
}

/* ==========================================================================
   6. ACCESSIBILITY UTILITIES
   ========================================================================== */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--dos-color-white);
  clip: auto !important;
  clip-path: none;
  color: var(--dos-color-black);
  display: block;
  font-family: var(--dos-font-heading);
  font-size: 0.875rem;
  font-weight: var(--dos-font-weight-bold);
  height: auto;
  left: var(--dos-space-xs);
  line-height: normal;
  padding: 12px 24px;
  text-decoration: none;
  top: var(--dos-space-xs);
  width: auto;
  z-index: var(--dos-z-toast);
  box-shadow: var(--dos-shadow-elevated);
}