/* ============================================================
   tokens.css - Cup Code Design Tokens
   ============================================================ */

:root {
  /* -- Brand colours ---------------------------------------- */
  --c-green:        #6FAE3C;
  --c-green-dark:   #4F7F2A;
  --c-green-light:  #A6D66B;
  --c-green-subtle: #EAF4D9;

  /* -- Neutrals (light mode) -------------------------------- */
  --c-bg:           #F5F1E8;
  --c-card:         #FFFFFF;
  --c-text:         #2E2E2E;
  --c-mute:         #6B6B6B;
  --c-border:       #E4E0D5;

  /* -- Aliases (used across pages) -------------------------- */
  --c-surface:      var(--c-card);
  --c-muted:        var(--c-mute);
  --c-text-muted:   var(--c-mute);
  --c-bg-alt:       var(--c-bg);
  --radius-sm:      var(--r-sm);
  --radius-md:      var(--r-md);
  --radius-lg:      var(--r-lg);
  --radius-xl:      var(--r-xl);
  --radius-full:    var(--r-full);

  /* -- Accent (CTA only) ------------------------------------ */
  --c-accent:       #F4A261;
  --c-accent-dark:  #E08040;

  /* -- Dark section (game showcase) ------------------------- */
  --c-dark:         #0E0E0E;
  --c-dark-card:    #1A1A1A;
  --c-dark-border:  #2A2A2A;
  --c-dark-mute:    #8A8A8A;

  /* -- Typography ------------------------------------------- */
  --font-head: 'Inter', 'IBM Plex Sans Arabic', 'Poppins', system-ui, sans-serif;
  --font-body: 'Inter', 'IBM Plex Sans Arabic', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Fira Code', monospace;

  /* -- Scale ------------------------------------------------ */
  --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.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;

  /* -- Spacing ---------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* -- Radius ----------------------------------------------- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;

  /* -- Shadow ----------------------------------------------- */
  --shadow-xs: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);

  /* -- Transitions ------------------------------------------ */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --duration:  220ms;

  /* -- Layout ----------------------------------------------- */
  --max-w:  1200px;
  --nav-h:  68px;
}

/* ============================================================
   Dark mode tokens
   Applied via: data-theme="dark" (JS toggle) or OS preference
   ============================================================ */
[data-theme="dark"] {
  --c-bg:           #0F0F14;
  --c-card:         #1B1B24;
  --c-text:         #E5E0D5;
  --c-mute:         #888580;
  --c-border:       #2C2C3A;
  --c-green:        #7DC44A;
  --c-green-dark:   #9AD866;
  --c-green-subtle: rgba(125,196,74,0.12);
  --c-surface:      var(--c-card);
  --c-muted:        var(--c-mute);
  --c-text-muted:   var(--c-mute);
  --c-bg-alt:       var(--c-bg);
  --c-dark:         #07070A;
  --c-dark-card:    #131318;
  --c-dark-border:  #222230;
  --shadow-xs: 0 1px 4px rgba(0,0,0,0.40);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.50);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.60);
  --shadow-lg: 0 8px 48px rgba(0,0,0,0.70);
}

/* OS-level dark preference when no explicit theme chosen */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:           #0F0F14;
    --c-card:         #1B1B24;
    --c-text:         #E5E0D5;
    --c-mute:         #888580;
    --c-border:       #2C2C3A;
    --c-green:        #7DC44A;
    --c-green-dark:   #9AD866;
    --c-green-subtle: rgba(125,196,74,0.12);
    --c-surface:      var(--c-card);
    --c-muted:        var(--c-mute);
    --c-text-muted:   var(--c-mute);
    --c-bg-alt:       var(--c-bg);
    --c-dark:         #07070A;
    --c-dark-card:    #131318;
    --c-dark-border:  #222230;
    --shadow-xs: 0 1px 4px rgba(0,0,0,0.40);
    --shadow-sm: 0 2px 10px rgba(0,0,0,0.50);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.60);
    --shadow-lg: 0 8px 48px rgba(0,0,0,0.70);
  }
}