/* ============================================================
   NVC360 — Colors & Type
   Source: nvc360-theme/style.css (WordPress theme v3.6.0)
   ============================================================ */

:root {
  /* ── Brand surfaces (dark-first) ─────────────────────── */
  --bg-primary:        #070B12;   /* near-black, page base */
  --bg-secondary:      #0C1220;   /* alt sections */
  --bg-card:           rgba(255,255,255,0.03);

  /* ── Accents ──────────────────────────────────────────── */
  --accent-primary:    #0EA5E9;   /* Sky-500  — main brand blue */
  --accent-secondary:  #06B6D4;   /* Cyan-500 — gradient pair */
  --accent-warm:       #F59E0B;   /* Amber-500 — stats / warnings */
  --accent-warm-2:     #FBBF24;   /* Amber-400 gradient pair */
  --accent-green:      #10B981;   /* Emerald-500 — success / live */
  --accent-red:        #EF4444;   /* Red-500 — problem cards */
  --accent-purple:     #8B5CF6;   /* Violet-500 — category tags */
  --accent-pink:       #EC4899;   /* Pink-500 — avatar accents */

  /* ── Text ─────────────────────────────────────────────── */
  --text-primary:      #F0F9FF;   /* near-white, slight blue tint */
  --text-secondary:    #CBD5E1;   /* slate-300 body */
  --text-muted:        #94A3B8;   /* slate-400 captions */

  /* ── Borders & glows ──────────────────────────────────── */
  --border-subtle:     rgba(255,255,255,0.07);
  --border-medium:     rgba(255,255,255,0.14);
  --border-glow:       rgba(14,165,233,0.25);

  /* ── Brand gradients ──────────────────────────────────── */
  --grad-sky-cyan:     linear-gradient(135deg,#0EA5E9 0%,#06B6D4 100%);
  --grad-hero-text:    linear-gradient(135deg,#FFFFFF 0%,#0EA5E9 45%,#06B6D4 100%);
  --grad-amber:        linear-gradient(135deg,#F59E0B 0%,#FBBF24 100%);
  --grad-red-amber:    linear-gradient(135deg,#EF4444 0%,#F59E0B 100%);

  /* ── Radii ────────────────────────────────────────────── */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  18px;
  --radius-2xl: 20px;
  --radius-pill: 9999px;

  /* ── Elevation / glows ────────────────────────────────── */
  --shadow-card:       0 20px 40px rgba(0,0,0,.35), 0 0 30px rgba(14,165,233,.07);
  --shadow-image-blue: 0 0 80px rgba(14,165,233,.15), 0 40px 80px rgba(0,0,0,.5);
  --shadow-image-cyan: 0 0 60px rgba(6,182,212,.12),  0 30px 60px rgba(0,0,0,.4);
  --shadow-btn-blue:   0 0 20px rgba(14,165,233,.3);
  --shadow-btn-blue-hover: 0 0 40px rgba(14,165,233,.55);
  --shadow-submit:     0 0 40px rgba(14,165,233,.35);

  /* ── Spacing scale ────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Typography ───────────────────────────────────────── */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono: 'Fira Code', ui-monospace, 'Courier New', monospace;

  --fs-display: clamp(38px, 6vw, 72px);
  --fs-h1:      clamp(32px, 5vw, 56px);
  --fs-h2:      clamp(28px, 4vw, 48px);
  --fs-h3:      20px;
  --fs-lead:    clamp(16px, 2.2vw, 20px);
  --fs-body:    15px;
  --fs-body-lg: 16px;
  --fs-small:   14px;
  --fs-caption: 13px;
  --fs-eyebrow: 12px;
  --fs-micro:   11px;

  --lh-tight:   1.06;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.75;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0;
  --tracking-eyebrow: 0.12em;
  --tracking-micro:   0.14em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-heavy:   800;
  --fw-black:   900;
}

/* ============================================================
   Semantic type utilities — mirror style.css usage
   ============================================================ */

.nvc-h1-hero,
.hero-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.nvc-h2,
h2.section-h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  line-height: 1.12;
  letter-spacing: var(--tracking-snug);
  color: var(--text-primary);
}

.nvc-h3,
.card-h3 {
  font-family: var(--font-sans);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.nvc-lead,
.hero-sub,
.section-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.nvc-body,
.card-body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-secondary);
}

.nvc-eyebrow,
.section-label {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-primary);
}

.nvc-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

.nvc-stat-number {
  font-family: var(--font-sans);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: var(--fw-black);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
}

.nvc-code,
code {
  font-family: var(--font-mono);
  font-size: 14px;
}

/* ============================================================
   Gradient text presets (sky→cyan, amber, red→amber)
   ============================================================ */
.gradient-text       { background: var(--grad-hero-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gradient-text-amber { background: var(--grad-amber);     -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.gradient-text-red   { background: var(--grad-red-amber); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ============================================================
   Brand fonts — Inter (self-hosted variable)
   Upstream brand stack: 'Inter'. Served from local /fonts/.
   Fira Code (mono) pulled from Google for dev labels only.
   ============================================================ */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-VariableFont_opsz_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/Inter-Italic-VariableFont_opsz_wght.ttf') format('truetype');
}
/* ensure fallback for unused line removed */
}
/* Fira Code @import removed for offline bundle */