/* SJ UI Tokens - Black/Gold + Crimson Accent
   Fonts: Cinzel (headings), Roboto (body)
*/
:root{
  /* Typography */
  --sj-font-heading: "Cinzel", serif;
  --sj-font-body: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;

  /* Core palette (rich black + gold) */
  --sj-bg: #f8f4ec;
  --sj-surface: #ffffff;
  --sj-surface-2: #f5efe4;
  --sj-text: #2a221a;
  --sj-muted: #6e6254;
  --sj-border: rgba(185, 145, 58, .22);
  --sj-border-strong: rgba(185, 145, 58, .35);

  /* Gold (heritage) */
  --sj-gold: #d6b66e;
  --sj-gold-2: #b9913a;
  --sj-gold-glow: rgba(214, 182, 110, .25);

  /* Accent (Crimson) */
  --sj-accent: #b9913a;
  --sj-accent-2: #d6b66e;
  --sj-accent-glow: rgba(214, 182, 110, .25);

  /* Status */
  --sj-ok: #2fbf71;
  --sj-warn: #f0b429;
  --sj-bad: #e74c3c;
  --sj-info: #3aa0ff;

  /* Sizing */
  --sj-radius-sm: 10px;
  --sj-radius-md: 14px;
  --sj-radius-lg: 18px;

  --sj-space-1: 6px;
  --sj-space-2: 10px;
  --sj-space-3: 14px;
  --sj-space-4: 18px;
  --sj-space-5: 24px;
  --sj-space-6: 32px;
  --sj-space-7: 42px;

  /* Shadows (subtle, premium) */
  --sj-shadow-1: 0 10px 25px rgba(0,0,0,.35);
  --sj-shadow-2: 0 18px 45px rgba(0,0,0,.45);

  /* Focus ring */
  --sj-focus: 0 0 0 3px rgba(214, 182, 110, .25);

  /* Z layers */
  --sj-z-base: 1;
  --sj-z-sticky: 50;
  --sj-z-modal: 1000;
  --sj-z-modal-top: 1100;

  /* Container */
  --sj-container: 1180px;
}