/* ═══════════════════════════════════════
   BASE — Variables · Reset · Fonts
═══════════════════════════════════════ */

/* ── Light / Dark tokens ── */
:root {
  --navy:   #083A4F;
  --teal:   #4E99A8; /* brightened from #407E8C — AA on dark bg */
  --aqua:   #C0D5D6;
  --gold:   #A58D66;
  --gold2:  #C4A96E;
  --sand:   #E5E1DD;

  /* Dark theme (default) */
  --bg:     #061E29;
  --bg2:    #071824;
  --surface: rgba(8,58,79,0.35);
  --text:   #E5E1DD;
  --text-muted: rgba(229,225,221,0.55);
  --border: rgba(192,213,214,0.1);
  --border-gold: rgba(165,141,102,0.2);

  /* Sizing */
  --radius: 0px;
  --trans: 0.3s cubic-bezier(0.16,1,0.3,1);
}

[data-theme="light"] {
  --bg:     #F3EFE9;
  --bg2:    #EAE4DC;
  --surface: rgba(255,255,255,0.7);
  --text:   #1a2e38;
  --text-muted: rgba(26,46,56,0.55);
  --border: rgba(8,58,79,0.12);
  --border-gold: rgba(165,141,102,0.3);
  /* Darkened for WCAG AA on light backgrounds */
  --gold:   #7A6035; /* 5.1:1 on --bg — was #A58D66 (2.78:1, fail) */
  --gold2:  #6B5530; /* 6.7:1 on white surface */
  --teal:   #2D6B78; /* 5.3:1 on --bg — was #407E8C (4.0:1, fail small text) */
}

/* ── RTL ── */
[dir="rtl"] { direction: rtl; }
[dir="rtl"] .eyebrow-line   { background: linear-gradient(to left,  transparent, var(--gold)) !important; }
[dir="rtl"] .eyebrow-line.r { background: linear-gradient(to right, transparent, var(--gold)) !important; }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
body  {
  background: var(--bg);
  color: var(--text);
  font-family: 'BodySans', sans-serif;
  font-weight: 300;
  overflow-x: hidden;
  transition: background var(--trans), color var(--trans);
}

/* ── Grain overlay ── */
body::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.35; mix-blend-mode: overlay;
}

/* ── Embedded fonts (Noto system fonts loaded in index.html) ── */