/**
 * QENEX Brand v1.0 — Additive visual layer
 * Loaded after q-infinity.css. Extends, does not replace, the Q-Infinity token system.
 *
 * Strategy: re-map existing semantic tokens to new brand values + add component overrides.
 * No changes to tokens.css, base.css, components.css, or q-infinity.css.
 */

/* ============================================================================
   BRAND TOKENS & SEMANTIC TOKEN REMAPS
   ============================================================================ */

:root {
  /* ── Cosmos foundation ── */
  --void:    #05060F;
  --space:   #0A0E27;
  --nebula:  #11152E;
  --orbit:   #1A1F3F;
  --quantum: #252B53;
  --dust:    #3A3F66;

  /* ── Brand signal ── */
  --indigo-900:  #1E1B4B;
  --indigo-700:  #312E81;
  --violet-600:  #6D28D9;
  --violet-500:  #7C3AED;
  --magenta-500: #C026D3;
  --magenta-400: #D946EF;
  --pink-400:    #EC4899;

  /* ── Electron accent ── */
  --cyan-400: #22D3EE;
  --cyan-300: #67E8F9;
  --sky-200:  #BAE6FD;

  /* ── Ink scale ── */
  --ink-100: #FFFFFF;
  --ink-200: #E5E7F5;
  --ink-300: #B4B8D6;
  --ink-400: #8389B0;
  --ink-500: #5A6088;
  --ink-600: #3A3F66;

  /* ── Semantic states ── */
  --success: #34D399;
  --warning: #FBBF24;
  --danger:  #F43F5E;
  --info:    var(--cyan-400);

  /* ── Signature gradients ── */
  --grad-cosmos:   linear-gradient(135deg, #0A0E27 0%, #1E1B4B 35%, #6D28D9 70%, #C026D3 100%);
  --grad-brand:    linear-gradient(90deg,  #1E1B4B 0%, #6D28D9 50%, #C026D3 100%);
  --grad-aurora:   linear-gradient(135deg, #312E81 0%, #7C3AED 40%, #EC4899 100%);
  --grad-electron: linear-gradient(135deg, #22D3EE 0%, #7C3AED 100%);

  /* ── Typography ── */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* ── Radius ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ── Elevation ── */
  --e-1:    0 1px 2px rgba(5,6,15,.4);
  --e-2:    0 8px 24px -8px rgba(5,6,15,.6);
  --e-3:    0 24px 60px -20px rgba(5,6,15,.7);
  --e-glow: 0 0 40px -8px rgba(124,58,237,.5);

  /* ── Re-map existing semantic tokens to brand v1 values ── */

  /* Surfaces */
  --surface-base:       var(--void);
  --surface-raised:     var(--nebula);
  --surface-elevated:   rgba(17, 21, 46, 0.8);
  --surface-card:       var(--nebula);
  --surface-glass:      rgba(17, 21, 46, 0.7);
  --qi-surface-base:    var(--void);
  --qi-surface-frosted: rgba(17, 21, 46, 0.85);

  /* Brand accent — violet replaces legacy indigo */
  --brand-primary:          var(--void);
  --brand-secondary:        var(--space);
  --brand-accent:           var(--violet-500);
  --brand-accent-hover:     var(--violet-600);
  --brand-accent-dim:       rgba(124, 58, 237, 0.7);
  --brand-accent-glow:      rgba(124, 58, 237, 0.4);
  --brand-accent-subtle:    rgba(124, 58, 237, 0.1);

  /* Electron cyan replaces Neural cyan */
  --brand-highlight:        var(--cyan-400);
  --brand-highlight-glow:   rgba(34, 211, 238, 0.4);
  --brand-highlight-subtle: rgba(34, 211, 238, 0.1);

  /* Borders */
  --border-muted:   rgba(255, 255, 255, 0.07);
  --border-subtle:  rgba(124, 58, 237, 0.15);
  --border-default: rgba(124, 58, 237, 0.30);
  --border-strong:  rgba(124, 58, 237, 0.50);
  --border-static:  var(--quantum);
  --glass-border:   rgba(124, 58, 237, 0.18);
  --glass-bg:       rgba(17, 21, 46, 0.7);

  /* Text */
  --text-primary:   var(--ink-100);
  --text-secondary: var(--ink-200);
  --text-muted:     var(--ink-300);
  --text-dim:       var(--ink-400);

  /* Gradients */
  --gradient-button:             var(--grad-brand);
  --gradient-brand:              var(--grad-brand);
  --gradient-text:               var(--grad-aurora);
  --gradient-text-hero:          var(--grad-cosmos);
  --qi-elite-gradient-hero-text: var(--grad-cosmos);
  --qi-elite-gradient-platinum:  var(--grad-brand);

  /* Shadows / glows */
  --shadow-glow-subtle:       0 0 20px rgba(124, 58, 237, 0.2);
  --shadow-glow-accent:       var(--e-glow);
  --qi-shadow-elevated:       var(--e-2);
  --qi-shadow-corporate:      var(--e-3);
  --qi-elite-shadow-prestige: var(--e-3);

  /* Semantic states */
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error:   var(--danger);

  /* Component tokens */
  --card-radius: var(--r-lg);
  /* Note: --btn-radius intentionally left at existing value;
     pill radius is applied explicitly on .btn-primary only */
}

/* ============================================================================
   DISPLAY FONT — apply to headings so Space Grotesk takes effect globally
   ============================================================================ */

h1, h2, h3, h4, h5, h6,
.qmc-hero-title,
.qmc-section-tag,
.qmc-stat-value,
.offering-card h3,
.acq-hero h1 {
    font-family: var(--font-display);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

/* Primary: cosmos gradient + pill radius + elevation */
.btn-primary {
    background: var(--grad-brand);
    border-radius: var(--r-pill);
    box-shadow: var(--e-2);
    color: var(--ink-100);
    border: none;
}
.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--grad-brand);
    box-shadow: var(--e-glow), var(--e-2);
    transform: translateY(-2px);
}

/* Secondary / ghost: quantum border, transparent fill */
.btn-ghost {
    border-color: var(--quantum);
    color: var(--ink-200);
}
.btn-ghost:hover,
.btn-ghost:focus-visible {
    background: rgba(124, 58, 237, 0.08);
    border-color: var(--violet-500);
}

/* Nav CTA: pill + brand gradient */
.nav-cta {
    background: var(--grad-brand);
    border-radius: var(--r-pill);
    box-shadow: var(--e-2);
    border: none;
}
.nav-cta:hover,
.nav-cta:focus-visible {
    box-shadow: var(--e-glow), var(--e-2);
    transform: translateY(-2px);
}

/* Nav logo icon badge */
.nav-logo-icon {
    background: var(--grad-brand);
    box-shadow: var(--e-glow);
}

/* ============================================================================
   CARDS
   ============================================================================ */

.qmc-card,
.offering-card,
.acq-card {
    background: var(--nebula);
    border-color: var(--quantum);
    border-radius: var(--r-lg);
}

.qmc-pillar {
    background: var(--nebula);
    border-color: var(--quantum);
}

.qmc-comp-row {
    border-bottom-color: var(--quantum);
}

.qmc-stats {
    border-bottom-color: var(--quantum);
}

/* ============================================================================
   HERO — cosmos gradient surface
   ============================================================================ */

.qmc-hero {
    background: var(--grad-cosmos);
}

.qmc-hero::before {
    /* Cosmos gradient provides all depth — suppress the radial double-gradient */
    display: none;
}

/* ============================================================================
   SECTION ACCENT TICK — 2px × 96px electron gradient above each section tag
   ============================================================================ */

.qmc-section-hdr::before {
    content: '';
    display: block;
    width: 2px;
    height: 32px;
    background: var(--grad-electron);
    border-radius: var(--r-sm);
    margin: 0 auto var(--space-6, 1.5rem);
    opacity: 0.75;
}

/* ============================================================================
   BACKDROP-FILTER FALLBACK
   ============================================================================ */

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .qmc-card,
    .offering-card,
    .acq-card {
        background: var(--nebula);
    }
}