/* ============================================================
   xx7 Game — Design Tokens
   Theme: "OBSIDIAN RESERVE"
   Obsidian black carries the page. Deep burgundy carries urgency.
   Antique champagne carries heritage luxury.
   ============================================================ */

:root {
  /* ---------- Core surfaces — Obsidian ---------- */
  --color-bg:              #0A0A0C;
  --color-bg-deep:         #060608;
  --color-surface:         #131215;
  --color-surface-2:       #1B1A1E;
  --color-surface-3:       #232025;
  --color-border:          #2B2426;
  --color-border-soft:     rgba(201, 168, 118, 0.14);
  --color-border-strong:   rgba(201, 168, 118, 0.34);

  /* ---------- Deep Burgundy ---------- */
  --color-burgundy:        #5C1023;
  --color-burgundy-dim:    #3A0A17;
  --color-burgundy-bright: #8C1F3F;
  --color-burgundy-glow:   #B32B4E;

  /* ---------- Antique Champagne ---------- */
  --color-champagne:       #C9A876;
  --color-champagne-light: #E8D9BB;
  --color-champagne-dim:   #A6875A;
  --color-gold-bright:     #F0C963;  /* matches the brand logo's bright gold */

  /* ---------- Roles ---------- */
  --color-accent:          var(--color-champagne);
  --color-accent-alt:      var(--color-burgundy);
  --color-text-primary:    #F3ECE4;
  --color-text-secondary:  #C7B9AE;
  --color-text-muted:      #8A7C72;
  --color-success:         #4CAF7D;
  --color-warning:         #E0A83C;
  --color-error:           #E4574C;
  --color-live:            #FF4757;

  /* ---------- Signature gradients ---------- */
  --gradient-champagne-foil:
    linear-gradient(115deg, #8F7345 0%, #C9A876 22%, #F3E6C8 42%, #E8D9BB 50%,
                            #C9A876 62%, #A6875A 80%, #8F7345 100%);
  --gradient-gold-solid:    linear-gradient(140deg, #F3E0AE 0%, #D8B87C 40%, #A6875A 100%);
  --gradient-burgundy-cta:  linear-gradient(140deg, #8C1F3F 0%, #5C1023 55%, #3A0A17 100%);
  --gradient-burgundy-glow: radial-gradient(circle, rgba(92, 16, 35, 0.40), transparent 70%);
  --gradient-reserve-mesh:
    radial-gradient(ellipse 80% 60% at 78% 8%,  rgba(92, 16, 35, 0.30), transparent 58%),
    radial-gradient(ellipse 70% 55% at 12% 88%, rgba(201, 168, 118, 0.13), transparent 58%),
    radial-gradient(ellipse 60% 50% at 50% 45%, rgba(140, 31, 63, 0.10), transparent 62%),
    #0A0A0C;
  --gradient-surface-card:  linear-gradient(160deg, rgba(43, 36, 38, 0.55) 0%, rgba(19, 18, 21, 0.92) 60%);
  --gradient-hairline:      linear-gradient(90deg, transparent, rgba(201,168,118,0.55) 30%,
                                            rgba(232,217,187,0.85) 50%, rgba(201,168,118,0.55) 70%, transparent);

  /* ---------- Shadows / glow ---------- */
  --shadow-sm:             0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-card:           0 4px 22px rgba(0, 0, 0, 0.55);
  --shadow-card-lg:        0 18px 50px rgba(0, 0, 0, 0.65);
  --shadow-glow:           0 0 24px rgba(201, 168, 118, 0.35);
  --shadow-glow-soft:      0 0 40px rgba(201, 168, 118, 0.18);
  --shadow-glow-burgundy:  0 0 24px rgba(140, 31, 63, 0.45);
  --shadow-inset-top:      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-emboss:         0 1px 0 rgba(0,0,0,0.85), 0 2px 3px rgba(0,0,0,0.55);

  /* ---------- Typography ---------- */
  --font-display: 'Marcellus', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body:    'Jost', 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-hero:    clamp(2.35rem, 6.2vw, 4.6rem);
  --fs-h1:      clamp(2rem,   4.6vw, 3.3rem);
  --fs-h2:      clamp(1.65rem, 3.4vw, 2.6rem);
  --fs-h3:      clamp(1.25rem, 2.1vw, 1.6rem);
  --fs-h4:      clamp(1.08rem, 1.5vw, 1.22rem);
  --fs-lead:    clamp(1.02rem, 1.5vw, 1.18rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;
  --fs-2xs:     0.72rem;

  --lh-tight:   1.16;
  --lh-snug:    1.38;
  --lh-body:    1.72;
  --ls-wide:    0.14em;
  --ls-wider:   0.24em;

  /* ---------- Layout ---------- */
  --container:      1200px;
  --container-wide: 1360px;
  --container-text: 780px;
  /* Generous breathing room down both sides of every page */
  --page-gutter:    clamp(20px, 5.2vw, 64px);

  --section-py:     clamp(64px, 8.5vw, 118px);
  --block-gap:      clamp(28px, 4vw, 52px);

  --radius-sm:      8px;
  --radius:         14px;
  --radius-lg:      20px;
  --radius-xl:      28px;
  --radius-pill:    999px;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:      0.18s;
  --t-base:      0.32s;
  --t-slow:      0.6s;

  /* ---------- Z-index scale ---------- */
  --z-mesh:     0;
  --z-content:  1;
  --z-sticky:   50;
  --z-header:   100;
  --z-drawer:   200;
  --z-float:    300;
  --z-modal:    400;
}

/* Honour the OS "reduce motion" setting everywhere. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast: 0.01ms;
    --t-base: 0.01ms;
    --t-slow: 0.01ms;
  }
}