/* base.css - typography, layout primitives, page-wide tone */

html {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
}

body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: 16px;
  line-height: 1.5;
  font-family: var(--font-sans);
}

/* Headings inherit display serif + tight tracking + line-height 1
   Default Bengali/Latin uses Newsreader. RTL Arabic inherits Cairo via
   the [dir="rtl"] override below. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-display);
  line-height: 1;
  font-weight: 500;
  color: var(--color-ink);
}

h1 { font-size: clamp(40px, 7vw, 80px); }
h2 { font-size: clamp(32px, 5vw, 64px); }
h3 { font-size: clamp(22px, 2.6vw, 36px); }
h4 { font-size: clamp(18px, 1.8vw, 24px); }

p {
  max-width: 65ch;
}

/* Arabic-first: headings, body, and form text use Cairo when dir=rtl */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] body {
  font-family: var(--font-sans);
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  letter-spacing: 0;
  line-height: 1.2;
}

/* Layout primitives */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.section {
  padding-block: var(--space-section);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-section-md);
  }
}

.tone-night {
  background: var(--color-night);
  color: var(--color-paper);
}

.tone-night h1,
.tone-night h2,
.tone-night h3,
.tone-night h4,
.tone-night h5,
.tone-night h6 {
  color: var(--color-paper);
}

.tone-night .text-muted,
.tone-night p {
  color: var(--color-night-muted);
}

.tone-night .eyebrow {
  color: var(--color-paper);
  border-color: rgba(244, 239, 230, 0.4);
}

.tone-night .hairline-top {
  border-color: rgba(244, 239, 230, 0.15);
}

[dir="rtl"] .tone-night h1,
[dir="rtl"] .tone-night h2,
[dir="rtl"] .tone-night h3 {
  letter-spacing: 0;
  line-height: 1.2;
}

.text-muted { color: var(--color-muted); }
.text-accent { color: var(--color-accent); }
.text-paper { color: var(--color-paper); }

.bg-paper   { background: var(--color-paper); }
.bg-surface { background: var(--color-surface); }
.bg-night   { background: var(--color-night); }
.bg-ink     { background: var(--color-ink); }

.border-hairline { border: 1px solid var(--color-hairline); }

/* Italic display utility */
.display-italic {
  font-style: italic;
  font-feature-settings: "ss01", "ss02";
}

/* Mono display for stability notes, install previews */
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "ss01";
}

/* Eyebrow tag - max 4 per page */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  margin-bottom: 12px;
}

.eyebrow-muted {
  border-color: var(--color-hairline);
  color: var(--color-muted);
}

/* Hairline top divider */
.hairline-top {
  border-top: 1px solid var(--color-hairline);
}

/* Body paragraph helper */
.lede {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 60ch;
}

[dir="rtl"] .lede {
  font-family: var(--font-sans);
}

.body-text {
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 60ch;
}

.body-text strong,
.body-text em {
  color: var(--color-ink);
}

/* Focus ring - accessibility */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Selection */
::selection {
  background: var(--color-accent);
  color: var(--color-paper);
}

/* Section reveal animation */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
}

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

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