/* ============================================================
   GadgetsSniper — Design Tokens v1.0
   Brand Direction A "Cyber Precision"
   Prefix: --gs-*
   Usage: Import once at root level. All components reference
          these variables exclusively — never hardcode hex values.
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@300;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Base Tokens ──────────────────────────────────────────── */
:root {

  /* ── Color — Brand Palette ───────────────────────────────── */
  --gs-color-black:    #0A0E1A;   /* Sniper Black  — bg hero, dark sections    */
  --gs-color-charcoal: #1A1F2E;   /* Charcoal      — cards, secondary sections */
  --gs-color-cyan:     #00D4FF;   /* Electric Cyan — primary CTA, links, accent */
  --gs-color-green:    #10F58A;   /* Plasma Green  — deals, success, savings   */
  --gs-color-white:    #F8FAFC;   /* Sniper White  — text on dark, light bg    */
  --gs-color-silver:   #94A3B8;   /* Silver Mist   — muted text, borders       */
  --gs-color-orange:   #FF6B35;   /* Alert Orange  — limited deals, urgency    */
  --gs-color-border-light: #E2E8F0; /* Light theme border                      */
  --gs-color-border-dark:  #2D3748; /* Dark theme border                       */
  --gs-color-row-even: #F1F5F9;   /* Table even rows (light mode)              */
  --gs-color-cyan-dim: rgba(0, 212, 255, 0.08);   /* Subtle cyan tint          */
  --gs-color-green-dim: rgba(16, 245, 138, 0.08); /* Subtle green tint         */
  --gs-color-cyan-hover: rgba(0, 212, 255, 0.06); /* Table row hover           */
  --gs-color-star:       #FBBF24;                 /* Rating stars (amber)       */

  /* ── Color — Gradients ───────────────────────────────────── */
  --gs-gradient-primary: linear-gradient(135deg, #00D4FF 0%, #10F58A 100%);
  --gs-gradient-dark:    linear-gradient(135deg, #0A0E1A 0%, #1A1F2E 100%);
  --gs-gradient-hero:    linear-gradient(135deg, rgba(0,212,255,0.12) 0%, rgba(16,245,138,0.06) 100%);
  --gs-gradient-card:    linear-gradient(180deg, #1A1F2E 0%, #0A0E1A 100%);

  /* ── Color — Semantic Aliases (Light Theme Default) ──────── */
  --gs-bg-primary:       var(--gs-color-white);
  --gs-bg-secondary:     #F1F5F9;
  --gs-bg-card:          var(--gs-color-white);
  --gs-bg-invert:        var(--gs-color-black);
  --gs-bg-elevated:      var(--gs-color-charcoal);

  --gs-text-default:     var(--gs-color-black);
  --gs-text-on-dark:     var(--gs-color-white);
  --gs-text-muted:       var(--gs-color-silver);
  --gs-text-link:        var(--gs-color-cyan);
  --gs-text-success:     var(--gs-color-green);
  --gs-text-danger:      var(--gs-color-orange);

  --gs-cta-primary:      var(--gs-color-cyan);
  --gs-cta-primary-text: var(--gs-color-black);
  --gs-cta-deal:         var(--gs-color-green);
  --gs-cta-deal-text:    var(--gs-color-black);
  --gs-cta-urgent:       var(--gs-color-orange);
  --gs-cta-urgent-text:  var(--gs-color-white);
  --gs-cta-ghost-border: var(--gs-color-cyan);
  --gs-cta-ghost-text:   var(--gs-color-cyan);

  --gs-border:           var(--gs-color-border-light);
  --gs-border-focus:     var(--gs-color-cyan);

  --gs-status-success-bg:  rgba(16,245,138,0.10);
  --gs-status-success-fg:  var(--gs-color-green);
  --gs-status-info-bg:     rgba(0,212,255,0.10);
  --gs-status-info-fg:     var(--gs-color-cyan);
  --gs-status-warning-bg:  rgba(255,107,53,0.10);
  --gs-status-warning-fg:  var(--gs-color-orange);
  --gs-status-error-bg:    rgba(239,68,68,0.10);
  --gs-status-error-fg:    #EF4444;

  /* ── Typography — Font Families ─────────────────────────── */
  --gs-font-heading: 'Sora', system-ui, sans-serif;
  --gs-font-body:    'Inter', system-ui, sans-serif;
  --gs-font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Typography — Scale ──────────────────────────────────── */
  --gs-text-xs:      12px;   /* badge labels, captions                */
  --gs-text-sm:      14px;   /* small/caption text                    */
  --gs-text-base:    17px;   /* body copy                             */
  --gs-text-lead:    20px;   /* intro / lead paragraph                */
  --gs-text-h4:      20px;   /* H4                                    */
  --gs-text-h3:      24px;   /* H3                                    */
  --gs-text-h3-mob:  20px;   /* H3 mobile                             */
  --gs-text-quote:   24px;   /* pull quotes                           */
  --gs-text-h2:      32px;   /* H2                                    */
  --gs-text-h2-mob:  26px;   /* H2 mobile                             */
  --gs-text-h1:      48px;   /* H1                                    */
  --gs-text-h1-mob:  32px;   /* H1 mobile                             */
  --gs-text-display: 64px;   /* hero display                          */
  --gs-text-display-mob: 40px; /* hero display mobile                 */
  --gs-text-mono:    15px;   /* specs / code mono                     */

  /* ── Typography — Line Heights ──────────────────────────── */
  --gs-lh-tight:   1.1;
  --gs-lh-heading: 1.15;
  --gs-lh-snug:    1.2;
  --gs-lh-normal:  1.5;
  --gs-lh-relaxed: 1.6;
  --gs-lh-loose:   1.7;

  /* ── Typography — Font Weights ──────────────────────────── */
  --gs-fw-regular:     400;
  --gs-fw-medium:      500;
  --gs-fw-semibold:    600;
  --gs-fw-bold:        700;
  --gs-fw-extrabold:   800;

  /* ── Typography — Letter Spacing ────────────────────────── */
  --gs-ls-tight:     -0.03em;  /* wordmark */
  --gs-ls-display:   -0.02em;  /* hero display */
  --gs-ls-heading:   -0.01em;  /* H1 */
  --gs-ls-normal:     0;
  --gs-ls-wide:       0.02em;  /* uppercase labels */
  --gs-ls-wider:      0.05em;  /* badge text */

  /* ── Spacing Scale (8px grid) ────────────────────────────── */
  --gs-space-1:    4px;   /* xs  */
  --gs-space-2:    8px;   /* sm  */
  --gs-space-3:   12px;   /* —   */
  --gs-space-4:   16px;   /* md  */
  --gs-space-5:   20px;   /* —   */
  --gs-space-6:   24px;   /* lg  */
  --gs-space-8:   32px;   /* —   */
  --gs-space-10:  40px;   /* xl  */
  --gs-space-12:  48px;   /* —   */
  --gs-space-16:  64px;   /* 2xl */
  --gs-space-20:  80px;   /* —   */
  --gs-space-24:  96px;   /* 3xl */
  --gs-space-32: 128px;   /* —   */

  /* Legacy aliases (backwards-compat) */
  --gs-space-xs:   var(--gs-space-1);
  --gs-space-sm:   var(--gs-space-2);
  --gs-space-md:   var(--gs-space-4);
  --gs-space-lg:   var(--gs-space-6);
  --gs-space-xl:   var(--gs-space-10);
  --gs-space-2xl:  var(--gs-space-16);

  /* ── Border Radius ───────────────────────────────────────── */
  --gs-radius-xs:   2px;
  --gs-radius-sm:   4px;
  --gs-radius-md:   8px;
  --gs-radius-lg:   12px;
  --gs-radius-xl:   16px;
  --gs-radius-2xl:  24px;
  --gs-radius-pill: 999px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --gs-shadow-xs:     0 1px 2px  rgba(10, 14, 26, 0.05);
  --gs-shadow-sm:     0 2px 4px  rgba(10, 14, 26, 0.06);
  --gs-shadow-md:     0 4px 12px rgba(10, 14, 26, 0.10);
  --gs-shadow-lg:     0 12px 32px rgba(10, 14, 26, 0.14);
  --gs-shadow-xl:     0 24px 48px rgba(10, 14, 26, 0.18);
  --gs-shadow-glow:       0 8px 24px rgba(0, 212, 255, 0.30);
  --gs-shadow-glow-green: 0 8px 24px rgba(16, 245, 138, 0.30);
  --gs-shadow-glow-lg:    0 16px 48px rgba(0, 212, 255, 0.40);
  --gs-shadow-inset:  inset 0 1px 2px rgba(10, 14, 26, 0.08);

  /* ── Z-Index Scale ───────────────────────────────────────── */
  --gs-z-below:    -1;
  --gs-z-base:      0;
  --gs-z-raised:   10;
  --gs-z-dropdown: 100;
  --gs-z-sticky:   200;
  --gs-z-modal:    300;
  --gs-z-toast:    400;

  /* ── Transitions ─────────────────────────────────────────── */
  --gs-transition-fast:    0.15s ease;
  --gs-transition-base:    0.2s ease;
  --gs-transition-slow:    0.3s ease;
  --gs-transition-spring:  0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Layout ──────────────────────────────────────────────── */
  --gs-container-sm:   640px;
  --gs-container-md:   768px;
  --gs-container-lg:  1024px;
  --gs-container-xl:  1280px;
  --gs-container-2xl: 1440px;

  /* ── Component Tokens ────────────────────────────────────── */
  --gs-btn-height-sm:  36px;
  --gs-btn-height-md:  44px;
  --gs-btn-height-lg:  52px;
  --gs-btn-px-sm:      16px;
  --gs-btn-px-md:      24px;
  --gs-btn-px-lg:      32px;
  --gs-btn-font-sm:    13px;
  --gs-btn-font-md:    15px;
  --gs-btn-font-lg:    17px;

  --gs-card-padding:   var(--gs-space-6);
  --gs-card-radius:    var(--gs-radius-lg);
  --gs-card-border:    1px solid var(--gs-border);

  --gs-input-height:   44px;
  --gs-input-px:       14px;
  --gs-input-radius:   var(--gs-radius-md);
  --gs-input-border:   1px solid var(--gs-color-silver);
  --gs-input-bg:       var(--gs-color-white);
  --gs-input-text:     var(--gs-color-black);
}

/* ── Dark Theme ──────────────────────────────────────────── */
[data-theme="dark"],
.gs-dark {
  --gs-bg-primary:    var(--gs-color-black);
  --gs-bg-secondary:  #0F1320;
  --gs-bg-card:       var(--gs-color-charcoal);
  --gs-bg-elevated:   #222840;

  --gs-text-default:  var(--gs-color-white);
  --gs-text-muted:    var(--gs-color-silver);

  --gs-border:        var(--gs-color-border-dark);

  --gs-shadow-sm:     0 2px 4px  rgba(0, 0, 0, 0.30);
  --gs-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.40);
  --gs-shadow-lg:     0 12px 32px rgba(0, 0, 0, 0.50);

  --gs-input-bg:      var(--gs-color-charcoal);
  --gs-input-text:    var(--gs-color-white);
  --gs-input-border:  1px solid var(--gs-color-border-dark);

  --gs-color-row-even: rgba(255,255,255,0.03);
  --gs-status-error-bg: rgba(239,68,68,0.15);
}

/* ── System dark mode preference (if no data-theme set) ───── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gs-bg-primary:    var(--gs-color-black);
    --gs-bg-secondary:  #0F1320;
    --gs-bg-card:       var(--gs-color-charcoal);
    --gs-bg-elevated:   #222840;
    --gs-text-default:  var(--gs-color-white);
    --gs-text-muted:    var(--gs-color-silver);
    --gs-border:        var(--gs-color-border-dark);
    --gs-shadow-sm:     0 2px 4px  rgba(0, 0, 0, 0.30);
    --gs-shadow-md:     0 4px 12px rgba(0, 0, 0, 0.40);
    --gs-shadow-lg:     0 12px 32px rgba(0, 0, 0, 0.50);
    --gs-input-bg:      var(--gs-color-charcoal);
    --gs-input-text:    var(--gs-color-white);
    --gs-input-border:  1px solid var(--gs-color-border-dark);
    --gs-color-row-even: rgba(255,255,255,0.03);
  }
}

/* ── Animation Keyframes ──────────────────────────────────── */
@keyframes gs-glow-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 212, 255, 0.30); }
  50%       { box-shadow: 0 8px 32px rgba(0, 212, 255, 0.55); }
}

@keyframes gs-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gs-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gs-slide-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gs-scan-line {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes gs-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Utility Animation Classes ───────────────────────────── */
.gs-anim-glow-pulse    { animation: gs-glow-pulse 2s ease-in-out infinite; }
.gs-anim-gradient-shift {
  background-size: 200% 200%;
  animation: gs-gradient-shift 4s ease infinite;
}
.gs-anim-fade-in  { animation: gs-fade-in  0.4s ease both; }
.gs-anim-slide-up { animation: gs-slide-up 0.5s ease both; }

/* ── Reduced Motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}