/* ───────────────────────────────────────────────────────────
   Sonora · Base
   Element defaults + structural surface/texture utilities.
   ─────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--heading-font);
  font-weight: var(--heading-weight);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

code, kbd, samp { font-family: var(--font-mono); }

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ── Limewash plaster ground ─────────────────────────────────
   Monolithic arid tactility: a real fleck/grain tile (paper
   inclusions, terracotta specks) over a barely-there warm mottle,
   so large fields read as matte pigment — never flat #fff.        */
.son-plaster {
  background-color: var(--paper);
  background-image:
    url('../assets/texture-limewash.png'),
    radial-gradient(circle at 18% 22%, rgba(189,90,58,0.035) 0, transparent 38%),
    radial-gradient(circle at 82% 8%, rgba(121,135,106,0.04) 0, transparent 42%),
    radial-gradient(circle at 62% 88%, rgba(176,125,63,0.035) 0, transparent 46%);
  background-size: 480px 480px, auto, auto, auto;
}

.son-plaster-dark {
  background-color: var(--charcoal);
  color: var(--text-inverse);
  background-image:
    url('../assets/texture-monolith.png'),
    radial-gradient(circle at 12% 16%, rgba(206,117,86,0.10) 0, transparent 40%),
    radial-gradient(circle at 88% 84%, rgba(121,135,106,0.08) 0, transparent 44%);
  background-size: 420px 420px, auto, auto;
}

/* Full-strength monolith — hero/poster grounds. Fired-adobe grain
   over deep warm umber (desert varnish, not generic stone).        */
.son-monolith {
  background-color: #211810;
  color: var(--ink-on-dark);
  background-image:
    url('../assets/texture-monolith.png'),
    url('../assets/texture-monolith.png'),
    linear-gradient(118deg, #190f08 0%, #2E2114 38%, #241A10 62%, #38281A 100%);
  background-size: 420px 420px, 213px 211px, auto;
}

/* Sand panel — raised surfaces with fine granular tooth. */
.son-sand {
  background-color: var(--sand-100);
  background-image: url('../assets/texture-sand.png');
  background-size: 360px 360px;
}

/* ── Real desert grounds — photographic material ─────────────────
   Aerial eroded badlands & rammed-earth sand strata. Reserved for
   poster moments: heroes, covers, section openers, deck titles.
   Never behind dense data. Pair with .son-scrim for type safety.  */
.son-badlands {
  background-image: url('../assets/desert-rock.jpg');
  background-size: cover; background-position: center;
  color: var(--ink-on-dark);
}
.son-strata {
  background-image: url('../assets/desert-strata.jpg');
  background-size: cover; background-position: center;
}
.son-scrim { position: relative; }
.son-scrim::before {
  content: ''; position: absolute; inset: 0;
  background: rgba(26, 16, 10, 0.55);
}
.son-scrim > * { position: relative; }
.son-scrim--soft::before {
  background: linear-gradient(100deg, rgba(26,16,10,0.82) 0%, rgba(26,16,10,0.55) 52%, rgba(26,16,10,0.18) 100%);
}

/* ── Thin-line data matrix ───────────────────────────────────
   Al-Kindi frequency grid / Tufte ruling. A hairline lattice
   for backgrounds of data zones and hero panels.              */
.son-matrix {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: var(--space-6) var(--space-6);
}
.son-matrix-fine {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: var(--space-3) var(--space-3);
}

/* ── Dotted survey grid ─────────────────────────────────────
   The dotted field of an analogue survey map — the ground that
   stipple density plots sit on. Pairs with StippleField.        */
.son-dotgrid {
  background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1px);
  background-size: var(--space-3) var(--space-3);
}
.son-dotgrid-fine {
  background-image: radial-gradient(circle, var(--line) 0.75px, transparent 0.75px);
  background-size: var(--space-2) var(--space-2);
}

/* ── Hairline helpers ───────────────────────────────────────── */
.son-rule { border: 0; border-top: var(--border-hairline); margin: 0; }
.son-rule-strong { border: 0; border-top: var(--border-rule); margin: 0; }