/* ============================================================
   Oliabo — Editorial Design System
   Global typographic, layout, and interaction refinements
   modeled on Swiss-grid editorial principles:
   size contrast over weight, generosity of whitespace,
   warm neutrals over cold grays, minimal border radius.
   ============================================================ */

/* ── Base ─────────────────────────────────────────────────── */

*, *::before, *::after {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background-color: var(--clr-bg-page);
  color: var(--clr-text-primary);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--font-size-base);
  line-height: 1.65;
}

/* ── Editorial Eyebrow Label ──────────────────────────────── */

.ed-label {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-neutral-medium);
  display: block;
  margin-bottom: 14px;
}

/* ── Display Heading Utility ─────────────────────────────── */
/* Use on any element to get the editorial display style */

.ed-display {
  font-family: var(--font-primary);
  font-size: clamp(2.8rem, 7vw, 6.5rem);
  font-weight: 600;
  line-height: 1.0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--clr-text-primary);
}

/* Serif variant — for callouts, pull quotes */
.ed-display--serif {
  font-family: var(--font-serif);
  font-weight: 700;
  font-style: italic;
}

/* ── Divider ──────────────────────────────────────────────── */

.ed-divider {
  width: 100%;
  height: 1px;
  background: var(--clr-neutral-light);
  border: none;
  margin: 0;
}

/* ── Section Rhythm ───────────────────────────────────────── */
/* Sections should breathe. These classes ensure consistent
   generous vertical spacing throughout the page. */

.section-xs  { padding-top: var(--space-2xl);  padding-bottom: var(--space-2xl);  }
.section-sm  { padding-top: var(--space-3xl);  padding-bottom: var(--space-3xl);  }
.section-md  { padding-top: var(--space-4xl);  padding-bottom: var(--space-4xl);  }
.section-lg  { padding-top: var(--space-5xl);  padding-bottom: var(--space-5xl);  }

/* ── Button Refinements ───────────────────────────────────── */

.btn, button, [class*="btn-"] {
  letter-spacing: 0.04em;
}

/* ── Image Refinements ────────────────────────────────────── */

img {
  display: block;
  max-width: 100%;
}

/* ── Link Refinements ─────────────────────────────────────── */

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

/* ── Scrollbar ─────────────────────────────────────────────── */

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--clr-bg-page); }
::-webkit-scrollbar-thumb { background: var(--clr-neutral-light); border-radius: 2px; }

/* ── Selection ─────────────────────────────────────────────── */

::selection {
  background: var(--clr-brand-accent);
  color: var(--clr-text-primary);
}

/* ── Homepage Section Typography Overrides ─────────────────── */
/* These specifically target the Tailwind-class-driven sections
   and pull their heading typography toward the editorial scale */

/* Large heading sizes get premium tracking and line-height */
[class*="text-3xl"],
[class*="text-4xl"],
[class*="text-5xl"],
[class*="text-6xl"],
[class*="text-7xl"],
[class*="text-8xl"],
[class*="text-9xl"] {
  font-family: var(--font-primary);
  letter-spacing: 0.02em;
  line-height: 1.04;
  font-weight: 600;
  text-transform: uppercase;
}

/* Eyebrows — refined and authoritative */
[class*="eyebrow"],
[class*="label-"] {
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
}

/* ── Warm Tint Overrides ──────────────────────────────────── */
/* The utility bg-neutral-lighter now resolves to a warm cream
   rather than a cold gray, per the updated settings_data.json.
   These overrides keep any hardcoded values in line. */

.bg-neutral-lighter { background-color: var(--clr-neutral-lighter) !important; }
.bg-neutral-light   { background-color: var(--clr-neutral-light) !important;   }
.bg-surface         { background-color: var(--clr-bg-surface) !important;      }

/* ── Card Radius Reset ─────────────────────────────────────── */
/* Cards and containers now use the updated radius scale:
   0 (sharp) at base, graduating up to 36px at round. */

.rounded-none { border-radius: 0 !important; }

/* ── Focus Styles ─────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--clr-brand-accent);
  outline-offset: 3px;
}

/* ── Homepage: cream → white ───────────────────────────────── */
/* Sections on the homepage that use the cream background use white instead. */

body.template-index {
  --clr-bg-page: #ffffff;
  --clr-bg-surface: #ffffff;
  --clr-neutral-light: #ffffff;
  --clr-neutral-lighter: #ffffff;
  --clr-bg-card-primary: #ffffff;
  --clr-bg-card-secondary: #ffffff;
  --clr-bg-accent-warm: #ffffff;
  --clr-bg-accent-soft: #ffffff;
  --clr-brand-light: #ffffff;
}