/*
Theme Name: Broxynet Trading
Text Domain: broxynet-trading
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.7
Author: Broxynet
Description: A fully custom Gutenberg block theme for trading sites — dark console aesthetic with neon accents, glassmorphism, and reusable optional blocks (hero, features, modes, console, settings, pricing, stats, faq, cta, navigation, footer).
License: MIT
Tags: one-column, block-templates, custom-colors, dark, trading
*/

/* ==========================================================================
   Design tokens — mirrored from theme.json presets into CSS variables.
   All raw color values live here (and in theme.json), nowhere else.
   ========================================================================== */
:root {
  /* Colors (mirror of --wp--preset--color--*) */
  --theme-bg-0: var(--wp--preset--color--bg-0, #05070d);
  --theme-bg-1: var(--wp--preset--color--bg-1, #0a0e18);
  --theme-surface: var(--wp--preset--color--surface, #101624);
  --theme-card-border: var(--wp--preset--color--card-border, #1d2739);
  --theme-text-primary: var(--wp--preset--color--text-primary, #e8edf5);
  --theme-text-secondary: var(--wp--preset--color--text-secondary, #9aa7bd);
  --theme-accent: var(--wp--preset--color--accent, #3dff8b);
  --theme-accent-2: var(--wp--preset--color--accent-2, #46e0ff);
  --theme-amber: var(--wp--preset--color--amber, #ffb454);
  --theme-red: var(--wp--preset--color--red, #ff5c7a);

  /* Typography scale */
  --theme-font-heading: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --theme-font-body: 'Inter', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --theme-font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  /* Layout */
  --theme-container-width: 1200px;
  --theme-content-width: 780px;
  --theme-section-spacing: clamp(48px, 8vw, 96px);
  --theme-nav-height: 72px;

  /* Radii / shadows */
  --theme-radius-sm: 8px;
  --theme-radius-md: 14px;
  --theme-radius-lg: 20px;
  --theme-glow-accent: 0 0 24px rgba(61, 255, 139, 0.35);
  --theme-glow-blue: 0 0 24px rgba(70, 224, 255, 0.35);
  --theme-shadow-card: 0 8px 30px rgba(0, 0, 0, 0.45);

  /* Motion */
  --theme-transition: 180ms ease;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background-color: var(--theme-bg-0);
  color: var(--theme-text-primary);
  font-family: var(--theme-font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--theme-font-heading);
  color: var(--theme-text-primary);
  margin-block: 0 0.5em;
}

a { color: var(--wp--preset--color--accent, #3dff8b); }
a:focus-visible { outline: 2px solid var(--wp--preset--color--accent-2, #46e0ff); outline-offset: 2px; }

img { max-width: 100%; height: auto; display: block; }

/* Focus visibility — never remove without replacement */
:focus-visible { outline: 2px solid var(--wp--preset--color--accent-2, #46e0ff); outline-offset: 2px; border-radius: 4px; }

/* Screen-reader-only utility (also provided by WP core as .screen-reader-text) */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

/* ==========================================================================
   Layout containers
   ========================================================================== */
.bnx-container {
  width: min(100%, var(--theme-container-width));
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
}
.bnx-content {
  width: min(100%, var(--theme-content-width));
  margin-inline: auto;
}

/* Section spacing for custom blocks */
.bnx-section {
  padding-block: clamp(48px, 8vw, 96px);
  position: relative;
}
.bnx-section--tinted { background-color: var(--theme-bg-1); }

/* Decorative orbs + grid overlay (subtle, non-interactive) */
.bnx-fx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.28;
  pointer-events: none;
}
.bnx-fx-grid {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(154,167,189,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(154,167,189,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: -1;
}

/* ==========================================================================
   Cards / glass surfaces — shared by feature, settings, console, pricing
   ========================================================================== */
.bnx-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.008)), var(--theme-surface);
  border: 1px solid var(--theme-card-border);
  border-radius: var(--theme-radius-md);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--theme-shadow-card);
}

.bnx-eyebrow {
  font-family: var(--theme-font-heading);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--wp--preset--color--accent, #3dff8b);
}

.bnx-grad-text {
  background: linear-gradient(120deg, var(--wp--preset--color--accent, #3dff8b), var(--wp--preset--color--accent-2, #46e0ff));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ==========================================================================
   Buttons (shared) — used by hero/cta/button-group blocks
   ========================================================================== */
.bnx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--theme-font-body);
  font-weight: 600;
  text-decoration: none;
  padding: 0.7em 1.4em;
  border-radius: var(--theme-radius-sm);
  border: 1px solid transparent;
  transition: transform var(--theme-transition), box-shadow var(--theme-transition), background-color var(--theme-transition);
}
.bnx-btn:hover { transform: translateY(-2px); }

.bnx-btn--primary {
  background: linear-gradient(120deg, var(--wp--preset--color--accent, #3dff8b), var(--wp--preset--color--accent-2, #46e0ff));
  color: #05070d;
}
.bnx-btn--primary:hover { box-shadow: var(--theme-glow-accent); }

.bnx-btn--ghost {
  background: transparent;
  border-color: var(--theme-card-border);
  color: var(--theme-text-primary);
}
.bnx-btn--ghost:hover { border-color: var(--wp--preset--color--accent, #3dff8b); box-shadow: var(--theme-glow-accent); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}