/* ==========================================================================
   u7777 game — Design Tokens  ·  "Midnight Royal"
   Single source of truth for colour, type, spacing, motion and elevation.
   ========================================================================== */

:root {
  /* ---- Core palette ---------------------------------------------------- */
  --color-bg:             #0A0E1A;   /* Midnight Navy — base background      */
  --color-bg-alt:         #0F1424;   /* slightly lifted section background   */
  --color-surface:        #131A2E;   /* card / panel surface                 */
  --color-surface-2:      #1A2340;   /* elevated surface / hover state       */
  --color-slate:          #3B4A6B;   /* Slate Blue — structural secondary    */
  --color-slate-light:    #5B6D96;   /* borders, dividers, muted UI          */
  --color-accent:         #D4AF37;   /* Royal Gold — primary accent          */
  --color-accent-bright:  #F1C94A;   /* hover / active gold                  */
  --color-accent-dim:     #9C822A;   /* pressed / disabled gold              */
  --color-text-primary:   #F4F6FB;
  --color-text-secondary: #AEB8D6;
  --color-text-muted:     #6B7592;
  --color-border:         #232C48;
  --color-success:        #2ED47A;
  --color-error:          #FF5C5C;
  --color-telegram:       #29A9EB;

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

  --fs-display: clamp(2.4rem, 1.55rem + 3.6vw, 4.35rem);
  --fs-h1:      clamp(2.05rem, 1.45rem + 2.6vw, 3.4rem);
  --fs-h2:      clamp(1.65rem, 1.28rem + 1.6vw, 2.5rem);
  --fs-h3:      clamp(1.22rem, 1.07rem + 0.62vw, 1.6rem);
  --fs-h4:      clamp(1.05rem, 0.99rem + 0.28vw, 1.22rem);
  --fs-lead:    clamp(1.02rem, 0.97rem + 0.28vw, 1.18rem);
  --fs-body:    1rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-xxs:     0.72rem;

  --lh-tight: 1.14;
  --lh-snug:  1.35;
  --lh-body:  1.78;

  --tracking-wide:  0.08em;
  --tracking-wider: 0.16em;

  /* ---- Layout ---------------------------------------------------------- */
  --container-max:  1240px;
  --container-wide: 1400px;
  --container-text: 860px;
  /* Generous breathing room down both flanks of every page */
  --gutter: clamp(1.25rem, 1rem + 3.6vw, 5rem);

  --header-h:     78px;
  --header-h-sm:  66px;
  --bottombar-h:  68px;

  /* ---- 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, 2.4rem + 4.2vw, 6.75rem);

  /* ---- Radii ----------------------------------------------------------- */
  --r-xs:   6px;
  --r-sm:   10px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ---- Signature effects ----------------------------------------------- */
  --shadow-card:        0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-card-hover:  0 18px 44px rgba(0, 0, 0, 0.55);
  --shadow-glow-gold:   0 0 24px rgba(212, 175, 55, 0.30);
  --shadow-glow-strong: 0 0 48px rgba(212, 175, 55, 0.45);
  --shadow-inset-top:   inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --gradient-hero:      radial-gradient(ellipse at top, #1A2340 0%, #0A0E1A 70%);
  --gradient-gold-line: linear-gradient(90deg, transparent, #D4AF37, transparent);
  --gradient-gold:      linear-gradient(135deg, #F1C94A 0%, #D4AF37 45%, #9C822A 100%);
  --gradient-gold-text: linear-gradient(180deg, #FBEBA8 0%, #F1C94A 42%, #D4AF37 78%, #A8862B 100%);
  --gradient-surface:   linear-gradient(160deg, rgba(26, 35, 64, 0.92) 0%, rgba(19, 26, 46, 0.92) 100%);

  /* ---- Motion ---------------------------------------------------------- */
  --t-fast:  150ms;
  --t-mid:   260ms;
  --t-slow:  400ms;
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* ---- Z-index ladder --------------------------------------------------- */
  --z-decor:    0;
  --z-content:  1;
  --z-sticky:   40;
  --z-header:   60;
  --z-drawer:   70;
  --z-fab:      80;
  --z-modal:    90;
}