/* ==========================================================================
   777CX / cx777pk.pk — Design Tokens
   Theme: "Royal Vault" — Midnight Navy + Royal Gold
   ========================================================================== */

:root {
  /* ---------- Colors ---------- */
  --color-bg:             #0A0F1F;   /* Midnight Navy base */
  --color-bg-deep:        #060912;   /* deeper navy for footer / hero edges */
  --color-surface:        #101830;   /* card surface */
  --color-surface-2:      #16204A;   /* elevated surface / hover */
  --color-accent:         #D4AF37;   /* Royal Gold */
  --color-accent-bright:  #F5D576;   /* hover / active gold */
  --color-accent-dim:     #9C7F2A;   /* muted gold for borders */
  --color-white:          #FFFFFF;
  --color-text-primary:   #F7F8FC;
  --color-text-secondary: #A9B2CC;
  --color-text-muted:     #5C6584;
  --color-border:         rgba(212, 175, 55, 0.18);
  --color-border-soft:    rgba(169, 178, 204, 0.12);
  --color-error:          #FF5C5C;
  --color-success:        #35D28A;

  /* Brand-supporting tints */
  --gold-4:   rgba(212, 175, 55, 0.04);
  --gold-8:   rgba(212, 175, 55, 0.08);
  --gold-14:  rgba(212, 175, 55, 0.14);
  --gold-22:  rgba(212, 175, 55, 0.22);
  --gold-40:  rgba(212, 175, 55, 0.40);

  --gradient-gold: linear-gradient(135deg, #F5D576 0%, #D4AF37 45%, #B8912B 72%, #F0CE6A 100%);
  --gradient-gold-rim: linear-gradient(160deg, #F7DE93 0%, #C6A233 18%, #4A3C13 46%, #E5C558 68%, #8A6F24 100%);
  --gradient-surface: linear-gradient(160deg, rgba(22, 32, 74, 0.72) 0%, rgba(16, 24, 48, 0.92) 100%);
  --gradient-vault: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(212, 175, 55, 0.16) 0%, transparent 65%);

  /* ---------- Typography ---------- */
  --font-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-heading: 'Sora', 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', 'DM Sans', 'Segoe UI', system-ui, sans-serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3.5rem;
  --text-6xl:  4.5rem;

  --line-height-tight:  1.15;
  --line-height-snug:   1.3;
  --line-height-normal: 1.5;
  --line-height-loose:  1.8;

  --tracking-wide:  0.06em;
  --tracking-wider: 0.14em;

  /* ---------- Spacing ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-28: 7rem;

  /* ---------- Radii ---------- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ---------- Elevation ---------- */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-card-lg: 0 18px 60px rgba(0, 0, 0, 0.6);
  --shadow-gold-glow: 0 0 24px rgba(212, 175, 55, 0.22);
  --shadow-gold-glow-strong: 0 0 48px rgba(212, 175, 55, 0.4);
  --shadow-inset-coin: inset 0 1px 2px rgba(255, 255, 255, 0.15), inset 0 -2px 4px rgba(0, 0, 0, 0.5);

  /* ---------- Layers ---------- */
  --z-base:   0;
  --z-raised: 10;
  --z-nav:    100;
  --z-modal:  200;
  --z-toast:  300;

  /* ---------- Motion ---------- */
  --transition-fast:   150ms cubic-bezier(.4, 0, .2, 1);
  --transition-normal: 300ms cubic-bezier(.4, 0, .2, 1);
  --transition-slow:   550ms cubic-bezier(.16, 1, .3, 1);

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-pad: var(--space-5);
  --header-h: 74px;
}

@media (min-width: 640px)  { :root { --container-pad: var(--space-8); } }
@media (min-width: 1024px) { :root { --container-pad: var(--space-12); --header-h: 84px; } }
@media (min-width: 1440px) { :root { --container-pad: var(--space-16); } }