/* ============================================================
   AUSTRALIAN ROME — Design Tokens
   Shared CSS variables: colour, type, spacing, motion.
   Theme: dark, premium Ancient-Roman x Australian.
   ============================================================ */

:root {
  /* ---- Core palette: near-black charcoal canvas ---- */
  --ink-900: #0d0d10;   /* deepest background */
  --ink-850: #111014;
  --ink-800: #16131a;   /* raised surfaces */
  --ink-750: #1c1822;
  --ink-700: #241f2c;   /* borders / hairlines on dark */
  --ink-600: #322b3c;

  /* ---- Aged marble off-white text ---- */
  --marble-50:  #f4efe6;  /* primary heading text */
  --marble-100: #e9e2d4;  /* body text */
  --marble-200: #cfc6b4;  /* secondary text */
  --marble-400: #9a917e;  /* muted / captions */
  --marble-600: #6b6457;  /* faint */

  /* ---- Antique gold + bronze accents ---- */
  --gold-300: #e4c987;
  --gold-400: #d4b15f;
  --gold-500: #c9a14a;   /* primary gold */
  --gold-600: #a8842f;
  --bronze-500: #8c6b3f;
  --bronze-700: #5a4324;

  /* ---- Imperial crimson (CTAs / odds highlights) ---- */
  --crimson-400: #9b3030;
  --crimson-500: #7a1f1f;  /* primary crimson */
  --crimson-600: #621717;
  --crimson-700: #4a1111;

  /* ---- Semantic ---- */
  --bg:            var(--ink-900);
  --bg-raised:     var(--ink-800);
  --bg-sunken:     var(--ink-850);
  --text:          var(--marble-100);
  --text-strong:   var(--marble-50);
  --text-muted:    var(--marble-400);
  --accent:        var(--gold-500);
  --accent-bright: var(--gold-300);
  --cta:           var(--crimson-500);
  --cta-hover:     var(--crimson-400);
  --hairline:      var(--ink-700);
  --focus-ring:    var(--gold-300);

  /* ---- Gold gradients / foil edges ---- */
  --foil: linear-gradient(135deg, #8c6b3f 0%, #e4c987 28%, #c9a14a 52%, #f4e6bf 70%, #a8842f 100%);
  --foil-soft: linear-gradient(180deg, var(--gold-400), var(--gold-600));
  --crimson-grad: linear-gradient(180deg, var(--crimson-400), var(--crimson-600));

  /* ---- Typography ---- */
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;        /* chiseled Roman caps */
  --font-deco:    "Cinzel Decorative", "Cinzel", Georgia, serif; /* ornamental accents */
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.5rem, 6vw, 5rem);
  --fs-h1:   clamp(2rem, 4.5vw, 3.4rem);
  --fs-h2:   clamp(1.5rem, 3vw, 2.3rem);
  --fs-h3:   clamp(1.15rem, 2vw, 1.5rem);
  --fs-body: 1.0625rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.75rem;

  --tracking-caps: 0.18em;
  --tracking-wide: 0.06em;
  --leading: 1.65;

  /* ---- Spacing scale ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* ---- Radius / shadow ---- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --shadow-soft: 0 10px 40px -12px rgba(0,0,0,0.7);
  --shadow-card: 0 16px 50px -20px rgba(0,0,0,0.85);
  --glow-gold: 0 0 0 1px rgba(201,161,74,0.35), 0 8px 30px -8px rgba(201,161,74,0.35);

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-narrow: 760px;
  --header-h: 76px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.45s;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}