/**
 * Solomon Quantum Field — design tokens.
 * Single source for color, type, spacing and motion. Components reference
 * tokens only; no page-specific arbitrary values.
 */

:root {
  /* ---- Surfaces: deep midnight base, not pure black (pure black reads flat
         on OLED and kills the depth the brand depends on) ---- */
  --bg-deep: #07091a;
  --bg-elevated: #0d1128;
  --surface: #141936;
  --surface-hover: #1b2145;

  /* ---- Light surfaces for editorial/body sections ---- */
  --paper: #f6f1e9;
  --paper-warm: #efe6d7;      /* warm sand for alternating bands */
  --accent-clay: #b08d57;     /* grounded warm accent */
  --accent-sage: #8aa88f;     /* calm organic accent */
  --border-on-light: rgba(58, 51, 80, .10);
  --paper-tint: #f4f4fb;
  --paper-tint-2: #eceaf7;

  /* ---- Text ---- */
  --text-primary: #f4f5ff;
  --text-secondary: #b9bede;
  --text-muted: #7f86ad;
  --text-on-light: #3a3350;
  --text-on-light-secondary: #6a6480;

  /* ---- Accents. Gold marks premium/sacred moments only; it must never
         become an interface color. ---- */
  --accent-indigo: #4f4fe8;
  --accent-violet: #8250f0;
  --accent-blue: #3d7fe6;
  --accent-gold: #c6a15b;

  --border-subtle: rgba(150, 158, 214, 0.16);
  --border-on-light: rgba(22, 25, 58, 0.10);
  --glow-soft: 0 0 60px rgba(82, 80, 240, 0.28);

  /* ---- Type. Manrope for interface, restrained serif for editorial pull
         quotes only. Heebo carries Hebrew at equal quality. ---- */
  --font-body: 'Manrope', 'Heebo', system-ui, sans-serif;
  --font-display: 'Manrope', 'Heebo', system-ui, sans-serif;
  --font-editorial: 'Fraunces', 'Frank Ruhl Libre', Georgia, serif;

  /*
   * Type scale, raised for readability.
   *
   * Body text sat at 1.06rem — about 17px — and much of the page used the
   * small size below that. On a phone, and for anyone over forty, that is
   * genuinely hard work. Everything here moves up a step, with the minimum
   * of each clamp raised most, since the minimum is what a phone actually
   * gets.
   */
  --display-xl: clamp(3.3rem, 7.6vw, 5.9rem);
  --display-lg: clamp(2.8rem, 5.6vw, 4.3rem);
  --h1: clamp(2.4rem, 4.6vw, 3.6rem);
  --h2: clamp(1.95rem, 3.6vw, 2.8rem);
  --h3: clamp(1.45rem, 2.3vw, 1.78rem);
  --body-lg: clamp(1.24rem, 1.8vw, 1.42rem);
  --body: 1.15rem;
  --body-sm: 1.04rem;

  /* Headings sit a shade deeper than body text so structure reads at a
     glance without introducing a second colour to the palette. */
  --ink-deep: #2F2A4D;
  --eyebrow: 0.8rem;
  --caption: 0.8rem;

  --leading-tight: 1.12;
  --leading-snug: 1.35;
  --leading-body: 1.75;

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

  /* ---- Max widths ---- */
  --w-article: 760px;
  --w-content: 1280px;
  --w-wide: 1560px;

  --radius-sm: 8px;
  --radius: 16px;
  --radius-lg: 24px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 640ms;
}

/* Logical properties throughout so RTL is structural, not a right-align hack. */
[dir='rtl'] { --flip: -1; }
[dir='ltr'] { --flip: 1; }

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

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

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin: 0;
}

.eyebrow {
  font-size: var(--eyebrow);
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent-violet);
}

/* Arrows must follow reading direction, not a fixed glyph. */
.arrow-inline { display: inline-block; transform: scaleX(var(--flip)); }

:focus-visible {
  outline: 2px solid var(--accent-violet);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--s-4);
  z-index: 999;
  padding: var(--s-3) var(--s-5);
  background: var(--accent-violet);
  color: #fff;
  border-radius: var(--radius-sm);
}
.skip-link:focus { inset-block-start: var(--s-4); }

/* Accessibility overrides aesthetics: decorative motion stops entirely. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   ACCESSIBLE PALETTE EXTENSIONS
   The antique gold reads beautifully but only carries 2.75:1 on
   paper, so it cannot be used for text or link labels. These are
   the same hue, darkened until they clear WCAG AA (4.5:1).
   Use --accent-gold for decoration (rules, borders, large display
   type) and --accent-gold-text wherever the gold has to be read.
   ============================================================ */
:root {
  --accent-gold-text: #7D633A;  /* 5.02:1 on paper, 4.56:1 on sand */
  --accent-gold-btn:  #8E7042;  /* white label clears 4.62:1 */
  --text-muted-aa:    #726A7A;  /* 4.60:1 on paper */
}