/* ==========================================================================
   RAJSPIN GAME — Design Tokens  ("Royal Spin")
   Colour, typography, spacing, radii, shadows and motion primitives.
   ========================================================================== */

:root {
  /* ---- Base surfaces — dark cabinet-lit canvas ---- */
  --color-bg:             #0B0708;
  --color-bg-alt:         #150F11;
  --color-bg-deep:        #060405;
  --color-surface:        #1E1518;
  --color-surface-2:      #261A1F;
  --color-surface-glass:  rgba(30, 21, 24, 0.65);
  --color-surface-blur:   rgba(11, 7, 8, 0.78);

  /* ---- Brand accents ---- */
  --color-burgundy:       #6D0F24;
  --color-burgundy-mid:   #8E1730;
  --color-burgundy-deep:  #4E0A19;
  --color-gold:           #CBA135;
  --color-gold-bright:    #E8CB7C;
  --color-gold-deep:      #8A6A1C;
  --color-emerald:        #2E9E6B;

  /* ---- Text ---- */
  --color-text-primary:   #F3E9DA;
  --color-text-muted:     #B0A697;
  --color-text-dim:       #877E72;
  --color-text-on-gold:   #1A1207;

  /* ---- Lines, borders, utility ---- */
  --color-border-gold:    rgba(203, 161, 53, 0.28);
  --color-border-soft:    rgba(243, 233, 218, 0.08);
  --color-border-strong:  rgba(203, 161, 53, 0.55);

  /* ---- Gradients ---- */
  --grad-gold: linear-gradient(135deg, #8A6A1C 0%, #CBA135 26%, #F2DFA4 50%, #CBA135 74%, #8A6A1C 100%);
  --grad-gold-soft: linear-gradient(135deg, rgba(203,161,53,0.16), rgba(232,203,124,0.05));
  --grad-burgundy: linear-gradient(135deg, #8E1730 0%, #6D0F24 55%, #4E0A19 100%);
  --grad-surface: linear-gradient(160deg, rgba(38,26,31,0.92) 0%, rgba(19,13,15,0.94) 100%);
  --grad-text-gold: linear-gradient(180deg, #F7ECC8 0%, #E8CB7C 38%, #CBA135 66%, #9A7622 100%);
  --grad-cabinet: linear-gradient(180deg, rgba(203,161,53,0.14), rgba(203,161,53,0) 45%);

  /* ---- Shadows / glows ---- */
  --shadow-gold-glow:     0 0 26px rgba(203, 161, 53, 0.35);
  --shadow-gold-glow-lg:  0 0 60px rgba(203, 161, 53, 0.28);
  --shadow-burgundy-glow: 0 0 22px rgba(109, 15, 36, 0.45);
  --shadow-sm:  0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 12px 30px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 26px 60px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 40px 90px rgba(0, 0, 0, 0.62);
  --shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* ---- Typography ---- */
  --font-display: "Cinzel", "Marcellus", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-hero:    clamp(2.2rem, 1.25rem + 3.6vw, 3.85rem);
  --fs-h1:      clamp(2rem, 1.25rem + 3.1vw, 3.4rem);
  --fs-h2:      clamp(1.65rem, 1.1rem + 2.2vw, 2.7rem);
  --fs-h3:      clamp(1.2rem, 1rem + 0.85vw, 1.6rem);
  --fs-h4:      clamp(1.02rem, 0.95rem + 0.4vw, 1.2rem);
  --fs-lead:    clamp(1rem, 0.95rem + 0.42vw, 1.18rem);
  --fs-body:    clamp(0.94rem, 0.9rem + 0.2vw, 1.02rem);
  --fs-sm:      0.875rem;
  --fs-xs:      0.78rem;
  --fs-eyebrow: 0.74rem;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.78;

  /* ---- 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: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 4.5rem;
  --sp-10: 6rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---- Layout ---- */
  --wrap-max: 1240px;
  --wrap-narrow: 920px;
  --gutter: clamp(1.15rem, 0.4rem + 4.2vw, 4.5rem);
  --header-h: 76px;

  /* ---- Radii ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-reel: cubic-bezier(0.16, 0.9, 0.24, 1);
  --t-fast: 160ms;
  --t-base: 280ms;
  --t-slow: 520ms;

  --z-bg: 0;
  --z-content: 1;
  --z-sticky: 60;
  --z-header: 80;
  --z-menu: 90;
  --z-modal: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 1ms;
    --t-base: 1ms;
    --t-slow: 1ms;
  }
}