/* ============================================================================
   Atlas Apex — design tokens
   ---------------------------------------------------------------------------
   Single-responsibility layer: colors, typography, spacing, radii, shadows,
   layout widths. All component CSS references these via var().

   Child themes override ONLY this file (or prepend overrides after it) to
   re-brand without touching component markup or logic.
   ========================================================================= */

/* Fonts: loaded via <link rel="preconnect"> + <link rel="stylesheet"> in
   header.php (0.4.3). Putting @import inside a render-blocking CSS file
   is the worst-case loading pattern — the font fetch can't start until
   this file is downloaded AND parsed. Header <link> parallels the fetch. */

:root {
  /* ---- Ink / neutrals ---- */
  --c-ink:        oklch(22% 0.02 240);
  --c-ink-2:      oklch(38% 0.02 240);
  --c-muted:      oklch(55% 0.015 240);
  --c-rule:       oklch(88% 0.008 240);
  --c-rule-2:     oklch(93% 0.006 240);

  /* ---- Paper / backgrounds ---- */
  --c-paper:      oklch(98.5% 0.004 240);
  --c-paper-2:    oklch(96% 0.008 240);
  --c-paper-3:    oklch(93% 0.015 240);

  /* ---- Accent (override per brand via child theme) ---- */
  --c-accent:      oklch(48% 0.11 240);
  --c-accent-deep: oklch(38% 0.12 240);
  --c-accent-ink:  oklch(28% 0.08 240);
  --c-accent-mist: oklch(92% 0.03 240);

  /* ---- Semantic aliases for components ---- */
  --c-link:        var(--c-accent);
  --c-link-hover:  var(--c-accent-deep);
  --c-on-accent:   #ffffff;

  /* ---- Type stack ---- */
  --f-display: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --f-body:    "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Spacing scale ---- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ---- Radii ---- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .04);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, .08), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-lg: 0 20px 60px rgba(15, 23, 42, .12), 0 2px 8px rgba(15, 23, 42, .06);

  /* ---- Layout widths ---- */
  --w-content: 1280px;
  --w-text:    720px;

  /* ---- Breakpoint reference (documented only — used in component @media) ---- */
  /* --bp-mobile:  640px */
  /* --bp-tablet:  900px */
}

/* ---- Element baseline ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-ink);
  background: var(--c-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--c-link); text-decoration: none; }
a:hover { color: var(--c-link-hover); }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }

.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}