/* ==========================================================================
   Design Tokens — GameX Theme v2.0
   Dark-first. Light overrides via [data-theme="light"].
   ========================================================================== */

:root {
  /* ── Brand — Blue accent (matches LewdClips) ────── */
  --gx-accent:          hsl(211, 100%, 50%);
  --gx-accent-hover:    hsl(211, 100%, 60%);
  --gx-accent-rgb:      0, 122, 255;

  /* ── Surfaces (Dark — true black OLED) ────────────── */
  --gx-bg-primary:      hsl(0, 0%, 0%);
  --gx-bg-secondary:    hsl(0, 0%, 5%);
  --gx-bg-tertiary:     hsl(0, 0%, 14%);
  --gx-bg-card:         hsl(0, 0%, 10%);
  --gx-bg-card-hover:   hsl(0, 0%, 14%);
  --gx-bg-input:        hsl(0, 0%, 10%);
  --gx-bg-overlay:      rgba(0, 0, 0, 0.7);

  /* ── Text (Dark) ──────────────────────────────────── */
  --gx-text-primary:    hsl(0, 0%, 98%);
  --gx-text-secondary:  hsl(0, 0%, 72%);
  --gx-text-muted:      hsl(0, 0%, 50%);
  --gx-text-inverse:    hsl(0, 0%, 0%);

  /* ── Borders ──────────────────────────────────────── */
  --gx-border:          hsl(0, 0%, 15%);
  --gx-border-light:    hsl(0, 0%, 20%);

  /* ── Semantic ─────────────────────────────────────── */
  --gx-success:         #00b894;
  --gx-warning:         #fdcb6e;
  --gx-danger:          #e17055;
  --gx-info:            #74b9ff;

  /* ── Shadows ──────────────────────────────────────── */
  --gx-shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.3);
  --gx-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.4);
  --gx-shadow-lg:       0 8px 30px rgba(0, 0, 0, 0.5);
  --gx-shadow-card:     0 2px 8px rgba(0, 0, 0, 0.3);

  /* ── Typography ───────────────────────────────────── */
  --gx-font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gx-font-mono:       'JetBrains Mono', 'Fira Code', monospace;

  --gx-text-xs:         0.75rem;    /* 12px */
  --gx-text-sm:         0.8125rem;  /* 13px */
  --gx-text-base:       0.9375rem;  /* 15px */
  --gx-text-md:         1rem;       /* 16px */
  --gx-text-lg:         1.125rem;   /* 18px */
  --gx-text-xl:         1.25rem;    /* 20px */
  --gx-text-2xl:        1.5rem;     /* 24px */
  --gx-text-3xl:        1.875rem;   /* 30px */
  --gx-text-4xl:        2.25rem;    /* 36px */

  --gx-leading-tight:   1.25;
  --gx-leading-normal:  1.5;
  --gx-leading-relaxed: 1.75;

  /* ── Spacing ──────────────────────────────────────── */
  --gx-sp-1:            0.25rem;    /* 4px */
  --gx-sp-2:            0.5rem;     /* 8px */
  --gx-sp-3:            0.75rem;    /* 12px */
  --gx-sp-4:            1rem;       /* 16px */
  --gx-sp-5:            1.25rem;    /* 20px */
  --gx-sp-6:            1.5rem;     /* 24px */
  --gx-sp-8:            2rem;       /* 32px */
  --gx-sp-10:           2.5rem;     /* 40px */
  --gx-sp-12:           3rem;       /* 48px */
  --gx-sp-16:           4rem;       /* 64px */

  /* ── Layout ───────────────────────────────────────── */
  --gx-container-max:   1400px;
  --gx-container-pad:   1rem;
  --gx-sidebar-width:   280px;
  --gx-navbar-height:   56px;
  --gx-card-radius:     0.5rem;
  --gx-radius-sm:       0.25rem;
  --gx-radius-md:       0.5rem;
  --gx-radius-lg:       0.75rem;
  --gx-radius-xl:       1rem;
  --gx-radius-full:     50rem;

  /* ── Grid ─────────────────────────────────────────── */
  --gx-grid-gap:        1rem;
  --gx-grid-cols:       4;

  /* ── Transitions ──────────────────────────────────── */
  --gx-transition:      150ms ease;
  --gx-transition-slow: 300ms ease;

  /* ── Z-index ──────────────────────────────────────── */
  --gx-z-dropdown:      100;
  --gx-z-sticky:        200;
  --gx-z-navbar:        300;
  --gx-z-sidebar:       400;
  --gx-z-modal:         500;
  --gx-z-lightbox:      600;
  --gx-z-toast:         700;

  /* ── Tags / Badges ────────────────────────────────── */
  --gx-tag-bg:          hsl(0, 0%, 18%);
  --gx-tag-text:        hsl(0, 0%, 72%);
  --gx-tag-hover-bg:    hsl(0, 0%, 25%);
}

/* ==========================================================================
   Light Theme Overrides
   ========================================================================== */
[data-theme="light"] {
  --gx-bg-primary:      #f5f5f9;
  --gx-bg-secondary:    #ffffff;
  --gx-bg-tertiary:     #eeeef4;
  --gx-bg-card:         #ffffff;
  --gx-bg-card-hover:   #f0f0f6;
  --gx-bg-input:        #ffffff;
  --gx-bg-overlay:      rgba(0, 0, 0, 0.4);

  --gx-text-primary:    #1a1a2e;
  --gx-text-secondary:  #4a4a6a;
  --gx-text-muted:      #8888a8;
  --gx-text-inverse:    #ffffff;

  --gx-border:          #d8d8e8;
  --gx-border-light:    #e8e8f0;

  --gx-shadow-sm:       0 1px 3px rgba(0, 0, 0, 0.08);
  --gx-shadow-md:       0 4px 12px rgba(0, 0, 0, 0.1);
  --gx-shadow-lg:       0 8px 30px rgba(0, 0, 0, 0.12);
  --gx-shadow-card:     0 2px 8px rgba(0, 0, 0, 0.06);

  --gx-tag-bg:          #e8e8f0;
  --gx-tag-text:        #4a4a6a;
  --gx-tag-hover-bg:    #d8d8e8;
}