/* ============================================
   SWEET JAMES — BRAND TOKENS (2026)
   Single source of truth. SB37-safe defaults.
   Adopts the sweetjames.com 2026 visual system:
   Inter everywhere, true-yellow accent, soft layered
   elevation, chunky radii, pill controls, flat bands.
   ============================================ */
:root {
  /* ---------- COLOR ---------- */
  --sj-navy: #0a1254;           /* primary navy */
  --sj-navy-ink: #07092E;       /* deeper ink for footer/cta bands */
  --sj-gold: #FFFF00;           /* true pop yellow */
  --sj-gold-hover: #F5F500;
  --sj-gold-deep: #D4D400;

  --sj-paper: #FAFAF7;          /* off-white page bg */
  --sj-cream: #F4F2EC;
  --sj-bone:  #EAE6DA;

  --sj-white: #FFFFFF;
  --sj-black: #000000;

  --sj-ink:       #0A0E2C;
  --sj-ink-soft:  #3A3E58;
  --sj-muted:     #6B6F85;
  --sj-muted-2:   #9095AA;
  --sj-line:        rgba(10, 14, 44, 0.10);
  --sj-line-strong: rgba(10, 14, 44, 0.20);

  /* state */
  --sj-success: #0E8A5F;
  --sj-danger:  #D33F4A;

  /* ---------- Legacy aliases (kept for backwards compat) ---------- */
  --sj-primary: var(--sj-navy);
  --sj-secondary: var(--sj-navy);
  --sj-accent: var(--sj-gold);
  --sj-neutral: var(--sj-paper);
  --sj-text: var(--sj-ink);
  --sj-line-soft: rgba(10, 14, 44, 0.04);
  --sj-on-navy-muted: rgba(255,255,255,0.65);
  --sj-on-navy-line:  rgba(255,255,255,0.10);
  --sj-on-navy-card:  rgba(255,255,255,0.04);

  /* ---------- TYPE ---------- */
  --sj-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sj-font-display: 'Inter', system-ui, -apple-system, sans-serif;   /* tight-tracked Inter */
  --sj-font-script:  'Inter', system-ui, -apple-system, sans-serif;   /* legacy alias */
  --sj-font-mono:    'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* fluid type scale */
  --sj-fs-xs: 12px;
  --sj-fs-sm: 13px;
  --sj-fs-base: 15px;
  --sj-fs-md: 16px;
  --sj-fs-lg: 18px;
  --sj-fs-xl: clamp(20px, 2.4vw, 24px);
  --sj-fs-2xl: clamp(24px, 3vw, 30px);
  --sj-fs-3xl: clamp(28px, 3.6vw, 40px);
  --sj-fs-4xl: clamp(34px, 4.8vw, 56px);
  --sj-fs-5xl: clamp(42px, 6.4vw, 78px);
  --sj-fs-6xl: clamp(52px, 8vw, 104px);

  /* ---------- SPACE ---------- */
  --sj-s-1: 4px; --sj-s-2: 8px; --sj-s-3: 12px; --sj-s-4: 16px;
  --sj-s-5: 24px; --sj-s-6: 32px; --sj-s-7: 48px; --sj-s-8: 64px;
  --sj-s-9: 80px; --sj-s-10: 96px; --sj-s-11: 120px;

  /* ---------- RADII (chunky 2026) ---------- */
  --sj-r-sm:   12px;
  --sj-r:      16px;
  --sj-r-lg:   20px;
  --sj-r-xl:   24px;
  --sj-r-2xl:  32px;
  --sj-r-full: 999px;

  /* ---------- ELEVATION (soft, close) ---------- */
  --sj-shadow-sm: 0 1px 2px rgba(10,14,44,.04), 0 2px 6px rgba(10,14,44,.04);
  --sj-shadow:    0 2px 4px rgba(10,14,44,.05), 0 8px 16px rgba(10,14,44,.06);
  --sj-shadow-lg: 0 4px 12px rgba(10,14,44,.08), 0 16px 32px rgba(10,14,44,.08);
  --sj-shadow-xl: 0 8px 24px rgba(10,14,44,.10), 0 32px 64px rgba(10,14,44,.10);

  /* ---------- LAYOUT ---------- */
  --sj-container: 1280px;
  --sj-container-narrow: 880px;
  --sj-gutter: 32px;

  /* unified controls (pill) */
  --sj-cta-h: 54px;
  --sj-cta-px: 28px;
  --sj-input-h: 54px;
  --sj-tap-min: 44px;

  /* motion (premium expo-out) */
  --sj-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sj-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --sj-dur: 220ms;
  --sj-dur-med: 320ms;
  --sj-dur-slow: 560ms;
}

@media (max-width: 768px) {
  :root { --sj-gutter: 20px; }
}

/* respect motion preferences */
@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;
  }
}

/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sj-font-body);
  background: var(--sj-paper);
  color: var(--sj-ink);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; padding: 0; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }

/* a11y focus */
:focus-visible {
  outline: 2px solid var(--sj-gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* skip link */
.sj-skip {
  position: absolute; top: -60px; left: 12px; z-index: 100;
  background: var(--sj-gold); color: var(--sj-ink);
  padding: 10px 18px; border-radius: var(--sj-r-full); font-weight: 700;
  font-size: 14px;
}
.sj-skip:focus { top: 12px; }

/* container */
.sj-container { max-width: var(--sj-container); margin: 0 auto; padding-inline: var(--sj-gutter); }
.sj-container--narrow { max-width: var(--sj-container-narrow); }

/* utility helpers */
.sj-text-accent { color: var(--sj-gold); }
.sj-text-primary { color: var(--sj-navy); }
.sj-text-white { color: var(--sj-white); }
.sj-text-muted { color: var(--sj-muted); }
.sj-text-ink-soft { color: var(--sj-ink-soft); }
.sj-bg-primary, .sj-bg-navy { background: var(--sj-navy); color: var(--sj-white); }
.sj-bg-ink { background: var(--sj-navy-ink); color: var(--sj-white); }
.sj-bg-white { background: var(--sj-white); color: var(--sj-ink); }
.sj-bg-paper, .sj-bg-neutral { background: var(--sj-paper); color: var(--sj-ink); }
.sj-bg-cream { background: var(--sj-cream); color: var(--sj-ink); }
.sj-center { text-align: center; }
.sj-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- DISPLAY HEADINGS (Inter, tight-tracked) ---------- */
.sj-display {
  font-family: var(--sj-font-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-transform: none;        /* explicit — no more ALL CAPS by default */
  margin: 0;
}
.sj-display--xl { font-size: var(--sj-fs-6xl); letter-spacing: -0.04em; }
.sj-display--lg { font-size: var(--sj-fs-5xl); letter-spacing: -0.04em; }
.sj-display--md { font-size: var(--sj-fs-4xl); }
.sj-display--sm { font-size: var(--sj-fs-3xl); letter-spacing: -0.03em; }

.sj-h1, .sj-h2, .sj-h3, .sj-h4 { margin: 0; font-weight: 800; letter-spacing: -0.02em; }
.sj-h1 { font-size: var(--sj-fs-5xl); line-height: 1.02; }
.sj-h2 { font-size: var(--sj-fs-4xl); line-height: 1.08; }
.sj-h3 { font-size: var(--sj-fs-3xl); line-height: 1.15; }
.sj-h4 { font-size: var(--sj-fs-xl); line-height: 1.25; }

.sj-eyebrow {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sj-gold);
}
.sj-eyebrow--dark { color: #003399; }

.sj-lead {
  font-size: var(--sj-fs-lg);
  line-height: 1.6;
  color: rgba(255,255,255,0.78);
  max-width: 60ch;
}
.sj-bg-white .sj-lead,
.sj-bg-paper .sj-lead,
.sj-bg-cream .sj-lead { color: var(--sj-ink-soft); }

.sj-text-gold { color: var(--sj-gold); }