/* ============================================================
   CYBERPUNK DESIGN SYSTEM — variables.css
   CSS Custom Properties (Design Tokens)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&display=swap');

:root {
  /* ── Core Palette ─────────────────────────────────────── */
  --color-bg-primary:       #000000;
  --color-bg-secondary:     #050510;
  --color-bg-tertiary:      #0a0a1a;
  --color-bg-card:          #0d0d1f;
  --color-bg-overlay:       rgba(0, 0, 0, 0.85);

  --color-deep-purple:      #1a0b2e;
  --color-dark-purple:      #120820;
  --color-mid-purple:       #2d1b4e;
  --color-surface:          #16082a;

  /* ── Neon Accent Colors ───────────────────────────────── */
  --color-cyan:             #00f0ff;
  --color-cyan-dim:         #00b8cc;
  --color-cyan-dark:        #007a88;
  --color-cyan-glow:        rgba(0, 240, 255, 0.15);
  --color-cyan-glow-strong: rgba(0, 240, 255, 0.35);

  --color-magenta:          #ff00ff;
  --color-magenta-dim:      #cc00cc;
  --color-magenta-dark:     #880088;
  --color-magenta-glow:     rgba(255, 0, 255, 0.15);
  --color-magenta-glow-strong: rgba(255, 0, 255, 0.35);

  --color-yellow:           #f0e000;
  --color-yellow-dim:       #b8aa00;
  --color-yellow-glow:      rgba(240, 224, 0, 0.15);

  --color-green:            #00ff88;
  --color-green-dim:        #00cc6a;
  --color-green-glow:       rgba(0, 255, 136, 0.15);

  --color-orange:           #ff6600;
  --color-orange-glow:      rgba(255, 102, 0, 0.15);

  --color-red:              #ff0044;
  --color-red-glow:         rgba(255, 0, 68, 0.15);

  /* ── Text Colors ──────────────────────────────────────── */
  --color-text-primary:     #e8e8f0;
  --color-text-secondary:   #a0a0c0;
  --color-text-muted:       #606080;
  --color-text-disabled:    #404060;
  --color-text-inverse:     #000000;
  --color-text-cyan:        var(--color-cyan);
  --color-text-magenta:     var(--color-magenta);
  --color-text-code:        #00ff88;

  /* ── Border Colors ────────────────────────────────────── */
  --color-border-default:   rgba(0, 240, 255, 0.2);
  --color-border-hover:     rgba(0, 240, 255, 0.6);
  --color-border-active:    var(--color-cyan);
  --color-border-magenta:   rgba(255, 0, 255, 0.3);
  --color-border-subtle:    rgba(255, 255, 255, 0.05);

  /* ── Typography ───────────────────────────────────────── */
  --font-display:           'Orbitron', 'Courier New', monospace;
  --font-body:              'Rajdhani', 'Arial', sans-serif;
  --font-mono:              'Share Tech Mono', 'Courier New', monospace;

  --font-size-xs:           0.75rem;    /* 12px */
  --font-size-sm:           0.875rem;   /* 14px */
  --font-size-base:         1rem;       /* 16px */
  --font-size-md:           1.125rem;   /* 18px */
  --font-size-lg:           1.25rem;    /* 20px */
  --font-size-xl:           1.5rem;     /* 24px */
  --font-size-2xl:          2rem;       /* 32px */
  --font-size-3xl:          2.5rem;     /* 40px */
  --font-size-4xl:          3rem;       /* 48px */
  --font-size-5xl:          4rem;       /* 64px */
  --font-size-6xl:          5rem;       /* 80px */

  --font-weight-light:      300;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;
  --font-weight-black:      900;

  --line-height-tight:      1.1;
  --line-height-snug:       1.3;
  --line-height-normal:     1.5;
  --line-height-relaxed:    1.7;
  --line-height-loose:      2;

  --letter-spacing-tight:   -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.05em;
  --letter-spacing-wider:   0.1em;
  --letter-spacing-widest:  0.2em;

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

  /* ── Border Radius ────────────────────────────────────── */
  --radius-none:    0;
  --radius-sm:      2px;
  --radius-md:      4px;
  --radius-lg:      8px;
  --radius-xl:      12px;
  --radius-2xl:     16px;
  --radius-full:    9999px;

  /* ── Shadows & Glows ──────────────────────────────────── */
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg:      0 8px 32px rgba(0, 0, 0, 0.7);
  --shadow-xl:      0 16px 64px rgba(0, 0, 0, 0.8);

  --glow-cyan-sm:   0 0 8px var(--color-cyan), 0 0 16px rgba(0, 240, 255, 0.4);
  --glow-cyan-md:   0 0 12px var(--color-cyan), 0 0 30px rgba(0, 240, 255, 0.5), 0 0 60px rgba(0, 240, 255, 0.2);
  --glow-cyan-lg:   0 0 20px var(--color-cyan), 0 0 50px rgba(0, 240, 255, 0.6), 0 0 100px rgba(0, 240, 255, 0.3);

  --glow-magenta-sm:  0 0 8px var(--color-magenta), 0 0 16px rgba(255, 0, 255, 0.4);
  --glow-magenta-md:  0 0 12px var(--color-magenta), 0 0 30px rgba(255, 0, 255, 0.5), 0 0 60px rgba(255, 0, 255, 0.2);
  --glow-magenta-lg:  0 0 20px var(--color-magenta), 0 0 50px rgba(255, 0, 255, 0.6), 0 0 100px rgba(255, 0, 255, 0.3);

  --glow-text-cyan:     0 0 10px var(--color-cyan), 0 0 20px rgba(0, 240, 255, 0.5);
  --glow-text-magenta:  0 0 10px var(--color-magenta), 0 0 20px rgba(255, 0, 255, 0.5);
  --glow-text-green:    0 0 10px var(--color-green), 0 0 20px rgba(0, 255, 136, 0.5);

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

  /* ── Transitions ──────────────────────────────────────── */
  --transition-fast:    150ms ease;
  --transition-base:    250ms ease;
  --transition-slow:    400ms ease;
  --transition-slower:  600ms ease;

  --ease-cyber:         cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-glitch:        cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-neon:          cubic-bezier(0.4, 0, 0.2, 1);

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

  --nav-height:     70px;
  --sidebar-width:  280px;

  /* ── Grid & Background ────────────────────────────────── */
  --grid-color:     rgba(0, 240, 255, 0.04);
  --grid-size:      40px;
  --scanline-color: rgba(0, 0, 0, 0.15);
  --scanline-size:  4px;

  /* ── Component Tokens ─────────────────────────────────── */
  --btn-height-sm:  32px;
  --btn-height-md:  44px;
  --btn-height-lg:  56px;

  --card-padding:   var(--space-6);
  --card-radius:    var(--radius-md);
  --card-border:    1px solid var(--color-border-default);

  --input-height:   44px;
  --input-padding:  var(--space-3) var(--space-4);
  --input-radius:   var(--radius-sm);
}

/* ── Dark Theme (default) ─────────────────────────────────── */
[data-theme="dark"] {
  --color-bg-primary:   #000000;
  --color-bg-secondary: #050510;
}

/* ── Light Theme Override ─────────────────────────────────── */
[data-theme="light"] {
  --color-bg-primary:     #f0f0ff;
  --color-bg-secondary:   #e0e0f5;
  --color-bg-tertiary:    #d0d0ea;
  --color-bg-card:        #e8e8f8;
  --color-text-primary:   #0a0a1a;
  --color-text-secondary: #2a2a4a;
  --color-text-muted:     #5a5a7a;
  --color-border-default: rgba(0, 100, 180, 0.25);
  --color-border-hover:   rgba(0, 100, 180, 0.6);
  --grid-color:           rgba(0, 100, 180, 0.06);
}