/* ==========================================================================
   ComeGame App — Design Tokens  ("Electric Aurora" system)
   Light mode only. Do not add a dark theme.
   ========================================================================== */

:root {
  /* ---------- Base surfaces ---------- */
  --color-bg:              #FBFCFF;
  --color-surface:         #FFFFFF;
  --color-surface-alt:     #F3F5FC;
  --color-surface-sunken:  #EEF1FB;
  --color-border:          #E4E8F7;
  --color-border-strong:   #D3D9F0;

  /* ---------- Brand accents ---------- */
  --color-electric-blue:   #2D5BFF;
  --color-electric-blue-2: #6E8CFF;
  --color-royal-purple:    #7B2FF7;
  --color-royal-purple-2:  #B57BFF;
  --color-ink-deep:        #0B0D1F;

  /* ---------- Signature gradients ---------- */
  --gradient-primary: linear-gradient(135deg, var(--color-electric-blue) 0%, var(--color-royal-purple) 100%);
  --gradient-primary-soft: linear-gradient(135deg, rgba(45, 91, 255, 0.12) 0%, rgba(123, 47, 247, 0.12) 100%);
  --gradient-flow: linear-gradient(100deg,
      var(--color-electric-blue) 0%,
      var(--color-royal-purple) 28%,
      var(--color-electric-blue-2) 52%,
      var(--color-royal-purple-2) 76%,
      var(--color-electric-blue) 100%);
  --gradient-aurora: radial-gradient(circle at 20% 20%, rgba(45, 91, 255, 0.18), transparent 50%),
                     radial-gradient(circle at 80% 30%, rgba(123, 47, 247, 0.16), transparent 55%),
                     radial-gradient(circle at 50% 90%, rgba(110, 140, 255, 0.12), transparent 50%);
  --gradient-band: linear-gradient(135deg, #1B2A6B 0%, #3B2A8C 45%, #6B2FC9 100%);
  --gradient-glass: linear-gradient(140deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 255, 255, 0.62) 100%);

  /* ---------- Text ---------- */
  --color-text-primary:    #12142B;
  --color-text-secondary:  #565B7A;
  --color-text-muted:      #8A8FB0;
  --color-text-on-accent:  #FFFFFF;

  /* ---------- Feedback ---------- */
  --color-success:         #16C784;
  --color-error:           #FF4D6D;
  --color-warning:         #FFB020;
  --color-gold:            #F5A524;

  /* ---------- Shadows / glow ---------- */
  --shadow-xs:          0 1px 2px rgba(18, 20, 43, 0.05);
  --shadow-card:        0 4px 24px rgba(18, 20, 43, 0.06);
  --shadow-glow-blue:   0 0 32px rgba(45, 91, 255, 0.28);
  --shadow-glow-purple: 0 0 32px rgba(123, 47, 247, 0.26);
  --shadow-glow-mixed:  0 8px 40px rgba(94, 69, 251, 0.22);
  --shadow-elevated:    0 12px 48px rgba(18, 20, 43, 0.10);
  --shadow-float:       0 18px 60px rgba(18, 20, 43, 0.14);

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

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.875rem;  /* 14 */
  --fs-base: 1rem;      /* 16 */
  --fs-md:   1.0625rem; /* 17 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  1.875rem;  /* 30 */
  --fs-3xl:  2.25rem;   /* 36 */
  --fs-4xl:  2.75rem;   /* 44 */
  --fs-5xl:  3.5rem;    /* 56 */

  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;

  /* ---------- Spacing scale ---------- */
  --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-24: 6rem;
  --space-32: 8rem;

  /* Vertical rhythm for full-bleed sections */
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --section-y-sm: clamp(2.5rem, 5vw, 4rem);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-wide: 1360px;
  --container-narrow: 860px;
  /* Generous breathing room on the left and right edges of every page */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  /* ---------- 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-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   160ms;
  --dur-base:   280ms;
  --dur-slow:   520ms;

  /* ---------- Layers ---------- */
  --z-aurora: 0;
  --z-content: 1;
  --z-header: 200;
  --z-drawer: 300;
  --z-overlay: 400;
  --z-toast: 500;
}