/* =============================================
   WOWS Shop — Design Tokens (GitHub-Dark)
   ============================================= */

:root {
  /* Backgrounds */
  --bg-base:      #050505;
  --bg-surface:   #0a0a0a;
  --bg-elevated:  #141414;
  --bg-overlay:   rgba(0, 0, 0, 0.8);

  /* Borders */
  --border:       rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.04);

  /* Text */
  --text-primary:   #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.5);
  --text-muted:     rgba(255, 255, 255, 0.3);

  /* Accent */
  --accent:       #ffffff;
  --accent-hover: rgba(255, 255, 255, 0.8);
  --accent-dim:   rgba(255, 255, 255, 0.4);

  /* Spacing */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Global resets using tokens */
body {
    position: relative;
    min-height: 100vh;
    background-color: var(--bg-base);
    color: var(--text-primary) !important;
    font-family: var(--font-sans);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

a {
    color: var(--text-primary);
    text-decoration: none;
}

button {
    color: inherit;
    cursor: pointer;
}

/* Cinematic Utilities */
.tracking-cinematic {
    letter-spacing: 0.25em;
    text-transform: uppercase;
}

.tracking-wide-sm {
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.btn-ghost-white {
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: white !important;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 0.75rem 1.75rem;
    font-size: 0.8rem;
}

.btn-ghost-white:hover {
    background: white;
    color: black !important;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.btn-ghost-accent {
    background: transparent;
    border: 1px solid var(--accent);
    color: var(--accent) !important;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 0.75rem 2rem;
    transition: all 0.3s ease;
    font-size: 0.7rem;
    font-weight: 600;
}

.btn-ghost-accent:hover {
    background: var(--accent);
    color: #000;
}

.section-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.section-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(5,5,5,0.7) 0%, rgba(5,5,5,0.95) 100%);
}

/* Tactical Product Card Refinement - High Contrast (Max Visibility) */
.product-card {
    background: #1c1c1c !important; /* Significantly lighter charcoal */
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 15px 40px rgba(0, 0, 0, 0.6);
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
}

.product-card::before, .product-card::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border-color: var(--accent);
    opacity: 0.3;
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 20;
}

/* Top Left Bracket */
.product-card::before {
    top: -1px;
    left: -1px;
    border-top: 0.5px solid currentColor;
    border-left: 0.5px solid currentColor;
}

/* Bottom Right Bracket */
.product-card::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 0.5px solid currentColor;
    border-right: 0.5px solid currentColor;
}

.product-card:hover {
    background: #111111 !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.05);
    transform: translateY(-4px);
}

.product-card:hover::before, .product-card:hover::after {
    opacity: 1;
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 0 5px var(--accent));
}

.product-card-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.03), transparent 70%);
    pointer-events: none;
}

/* Tactical HUD & Grid */
.tactical-grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -2; /* Deep background layer */
    opacity: 0.15; /* Minimal presence */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 0.5px, transparent 0.5px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0.5px, transparent 0.5px);
    background-size: 100px 100px;
    height: 100%;
    min-height: 100vh;
}

.cyber-circuitry {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0; /* Base background layer */
    opacity: 0.5; /* High visibility tactical overlay */
    height: 100%;
    min-height: 100vh;
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-width='0.5'%3E%3Cpath d='M0 100h40l20 20h120M250 0v50l30 30h100l20-20V0M450 150h60l40 40v100l-20 20H400l-30-30M0 500h100l40-40h150M600 0v80l-30 30h-100l-20 20v100M800 300h-50l-30-30h-100M400 800v-60l30-30h100v-50M0 700h80l20-20V550M700 800l-40-40V600l20-20h120'/%3E%3Ccircle cx='180' cy='120' r='2' fill='white'/%3E%3Ccircle cx='280' cy='80' r='2' fill='white'/%3E%3Ccircle cx='510' cy='150' r='2' fill='white'/%3E%3Ccircle cx='290' cy='460' r='2' fill='white'/%3E%3Ccircle cx='450' cy='320' r='2' fill='white'/%3E%3Ccircle cx='620' cy='710' r='2' fill='white'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 800px 800px;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.4));
}

.tactical-grid::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 0.5px, transparent 0.5px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0.5px, transparent 0.5px);
    background-size: 20px 20px;
}

.neon-line-h {
    height: 0.5px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    width: 100%;
    opacity: 0.1;
    box-shadow: 0 0 10px var(--accent);
}

.hud-bracket {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    pointer-events: none;
}

.scanline-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: linear-gradient(
        to bottom,
        transparent 50%,
        rgba(255, 255, 255, 0.02) 50%
    );
    background-size: 100% 4px;
    z-index: 50;
    pointer-events: none;
    opacity: 0.5;
}

/* Footer & General Link Visibility Overrides */
footer a {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: all 0.3s ease;
}

footer a:hover {
    color: var(--accent) !important;
    text-shadow: 0 0 10px rgba(255, 204, 0, 0.4);
}

/* Category Filter Button Contrast */
.filter-btn {
    color: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.filter-btn.active, .filter-btn:hover {
    color: var(--accent) !important;
    border-color: var(--accent) !important;
    background: rgba(255, 204, 0, 0.05) !important;
    box-shadow: 0 0 15px rgba(255, 204, 0, 0.1);
}

/* Tactical Utility Links */
.link-tactical {
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.2em;
    font-size: 0.6rem;
    transition: all 0.3s ease;
}

.link-tactical:hover {
    color: white;
    letter-spacing: 0.25em;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}