/* ==========================================================================
   Comegame — Design Tokens  ("Electric Royal" premium dark gaming theme)
   come-app.org
   --------------------------------------------------------------------------
   Load order: tokens.css -> main.css -> pages/<page>.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   SELF-HOSTED WEBFONTS
   Drop the WOFF2 files listed in assets/fonts/README.txt into that folder,
   then uncomment this block. Until then the system stack below is used, so
   the site stays fast and makes zero external font requests.
   --------------------------------------------------------------------------
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-800.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
   -------------------------------------------------------------------------- */

:root {
  /* ---------- Core surfaces ---------------------------------------------- */
  --color-bg:            #0A0A14;   /* near-black deep space navy */
  --color-bg-secondary:  #12121F;
  --color-surface:       #171728;
  --color-surface-2:     #1E1E36;
  --color-surface-3:     #262844;

  /* ---------- Brand ------------------------------------------------------ */
  --color-electric-blue: #2E6BFF;
  --color-electric-blue-bright: #4D8CFF;
  --color-royal-purple:  #7B2FF7;
  --color-royal-purple-bright: #9D5CFF;

  /* ---------- Text ------------------------------------------------------- */
  --color-white:          #FFFFFF;
  --color-text-primary:   #F4F5FF;
  --color-text-secondary: #A8ADC7;
  --color-text-muted:     #5C6088;

  /* ---------- Lines & status --------------------------------------------- */
  --color-border:        #262844;
  --color-border-soft:   rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.16);
  --color-success:       #00E6A0;
  --color-warning:       #FFC94D;
  --color-error:         #FF5C7A;
  --color-gold:          #FFD166;

  /* ---------- Signature gradients ---------------------------------------- */
  --gradient-primary: linear-gradient(135deg, var(--color-electric-blue) 0%, var(--color-royal-purple) 100%);
  --gradient-primary-soft: linear-gradient(135deg, rgba(46, 107, 255, 0.18) 0%, rgba(123, 47, 247, 0.18) 100%);
  --gradient-primary-rev: linear-gradient(135deg, var(--color-royal-purple) 0%, var(--color-electric-blue) 100%);
  --gradient-bright: linear-gradient(135deg, var(--color-electric-blue-bright) 0%, var(--color-royal-purple-bright) 100%);
  --gradient-radial-glow: radial-gradient(circle, rgba(46, 107, 255, 0.35) 0%, rgba(123, 47, 247, 0.15) 45%, transparent 70%);
  --gradient-surface: linear-gradient(160deg, rgba(30, 30, 54, 0.92) 0%, rgba(16, 16, 30, 0.92) 100%);
  --gradient-text: linear-gradient(120deg, #FFFFFF 0%, #B9CBFF 40%, #C6A9FF 100%);
  --gradient-line: linear-gradient(90deg, transparent, rgba(46, 107, 255, 0.6), rgba(123, 47, 247, 0.6), transparent);

  /* ---------- Elevation & glow ------------------------------------------- */
  --shadow-glow-blue:   0 0 30px rgba(46, 107, 255, 0.35);
  --shadow-glow-purple: 0 0 30px rgba(123, 47, 247, 0.35);
  --shadow-glow-mixed:  0 0 40px rgba(90, 80, 251, 0.30);
  --shadow-card:        0 8px 24px rgba(0, 0, 0, 0.50);
  --shadow-card-lg:     0 24px 60px rgba(0, 0, 0, 0.60);
  --shadow-inset-top:   inset 0 1px 0 rgba(255, 255, 255, 0.06);

  /* ---------- Glass ------------------------------------------------------ */
  --glass-bg:        rgba(23, 23, 40, 0.60);
  --glass-bg-strong: rgba(23, 23, 40, 0.86);
  --glass-border:    1px solid rgba(255, 255, 255, 0.08);
  --glass-blur:      blur(12px);

  /* ---------- Typography -------------------------------------------------- */
  --font-display: 'Sora', 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1rem;       /* 16px */
  --fs-md:   1.0625rem;  /* 17px */
  --fs-lg:   1.125rem;   /* 18px */
  --fs-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  --fs-h4:   clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem);
  --fs-h3:   clamp(1.35rem, 1.2rem + 0.8vw, 1.75rem);
  --fs-h2:   clamp(1.75rem, 1.4rem + 1.7vw, 2.75rem);
  --fs-h1:   clamp(2.15rem, 1.6rem + 2.9vw, 4rem);
  --fs-display: clamp(2.6rem, 1.8rem + 4vw, 5rem);

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-base:  1.75;
  --lh-loose: 1.85;

  --tracking-tight: -0.02em;
  --tracking-wide:  0.08em;
  --tracking-caps:  0.16em;

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

  /* Vertical rhythm between page sections */
  --section-y: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);
  --section-y-sm: clamp(2.5rem, 1.8rem + 3vw, 4.25rem);

  /* Generous side gutters — deliberate breathing room left & right */
  --gutter: clamp(1.25rem, 5.5vw, 5rem);
  --container-max: 1200px;
  --container-wide: 1360px;
  --container-narrow: 820px;

  /* ---------- Radii ------------------------------------------------------ */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --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);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 600ms;

  /* ---------- Layers ------------------------------------------------------ */
  --z-orbs: 0;
  --z-content: 2;
  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 300;
  --z-toast: 400;

  /* ---------- Component sizing -------------------------------------------- */
  --header-h: 68px;
  --ticker-h: 38px;
}

@media (min-width: 1200px) {
  :root {
    --header-h: 78px;
  }
}