/* -- Cyberpunk / Glitch Design System -- Design Tokens -------------------- */

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

:root {
  /* -- Core Palette -- */
  --bg:            #0a0a0f;
  --bg-card:       #12121a;
  --bg-muted:      #1c1c2e;
  --border:        #2a2a3a;
  --border-light:  #1e1e30;

  /* -- Text -- */
  --text:    #e0e0e0;
  --text-2:  #a0a0b0;
  --text-3:  #6b7280;

  /* -- Neon Accents -- */
  --accent:           #00ff88;
  --accent-secondary: #ff00ff;
  --accent-tertiary:  #00d4ff;
  --danger:           #ff3366;
  --danger-soft:      rgba(255, 51, 102, 0.15);
  --success:          #00ff88;
  --success-soft:     rgba(0, 255, 136, 0.1);
  --gold:             #f0c020;
  --gold-soft:        rgba(240, 192, 32, 0.1);
  --accent-soft:      rgba(0, 255, 136, 0.1);

  /* -- Surfaces -- */
  --surface:   var(--bg-card);
  --surface-2: var(--bg-muted);
  --surface-3: #8888a0;

  /* -- Legacy compat -- */
  --black: #0a0a0f;
  --white: #e0e0e0;
  --red:   #ff3366;
  --blue:  #00d4ff;
  --yellow: #f0c020;
  --muted: var(--bg-muted);

  /* -- Radii: sharp by default -- */
  --r-none: 0px;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   0px;
  --r-xl:   0px;
  --r-pill: 9999px;
  --r-full: 9999px;

  /* -- Neon Glow Shadows -- */
  --shadow-neon:     0 0 5px #00ff88, 0 0 10px rgba(0,255,136,0.25);
  --shadow-neon-sm:  0 0 3px #00ff88, 0 0 6px rgba(0,255,136,0.19);
  --shadow-neon-lg:  0 0 10px #00ff88, 0 0 20px rgba(0,255,136,0.37), 0 0 40px rgba(0,255,136,0.19);
  --shadow-neon-sec: 0 0 5px #ff00ff, 0 0 20px rgba(255,0,255,0.37);
  --shadow-neon-ter: 0 0 5px #00d4ff, 0 0 20px rgba(0,212,255,0.37);

  /* -- Legacy shadow aliases -- */
  --shadow-sm: var(--shadow-neon-sm);
  --shadow-md: var(--shadow-neon);
  --shadow-lg: var(--shadow-neon-lg);

  /* -- Typography -- */
  --font-heading: 'Orbitron', 'Share Tech Mono', monospace;
  --font-body:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-label:   'Share Tech Mono', monospace;

  --txt-xs:  12px;
  --txt-sm:  13px;
  --txt-base: 15px;
  --txt-md:  16px;
  --txt-lg:  18px;
  --txt-xl:  22px;
  --txt-2xl: 26px;
  --txt-3xl: 34px;
  --txt-4xl: 42px;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* -- Spacing (4px grid) -- */
  --sp-1: 4px;
  --sp-2: 6px;
  --sp-3: 8px;
  --sp-4: 10px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;

  /* -- Transitions (digital, snappy) -- */
  --t-fast: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  --t-med:  0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* -- Borders -- */
  --bw:       1px;
  --bw-thick: 2px;

  /* -- Safe area -- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* -- z-index layers -- */
  --z-bar:     10;
  --z-overlay: 100;
  --z-top:     9999;

  /* -- Chamfer clip-paths -- */
  --chamfer:    polygon(0 8px, 8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px));
  --chamfer-sm: polygon(0 4px, 4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px));
}