/* ============================================================
   PANTEREX BRAND SYSTEM v1
   Premium · Stealthy · Technical
   85% dark neutrals / 10% white-silver / 5% purple accents
   ============================================================ */

/* ---- FONTS (Satoshi headlines, Inter UI — both free) ---- */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- BACKGROUNDS (deep matte black system) ---- */
  --bg:            #050507;   /* primary background - deep matte black */
  --bg2:           #0A0A0F;   /* alt background */
  --surface:       #111117;   /* cards, panels, navs */
  --surface2:      #15151D;   /* elevated surface */
  --surface3:      #1A1A23;   /* highest elevation */

  /* legacy aliases (so existing markup keeps working) */
  --bg3:           #15151D;

  /* ---- PURPLE ACCENT (use sparingly — 5% rule) ---- */
  --purple:        #8B5CF6;   /* signature brand purple */
  --purple-bright: #A855F7;   /* softer version */
  --purple-deep:   #6D28D9;   /* deep luxury version */
  --purple-glow:   #C084FC;   /* hover states, subtle lighting */
  --purple-plum:   #5B21B6;   /* deep plum accent */
  --purple-veil:   rgba(192,132,252,0.12); /* glow fill */

  /* ---- TEXT ---- */
  --text:          #F5F5F7;   /* primary text */
  --white:         #F5F5F7;   /* legacy alias */
  --text-2:        #A1A1AA;   /* secondary text */
  --muted:         #A1A1AA;   /* legacy alias */
  --muted2:        #71717A;   /* muted text */

  /* ---- METALLIC / CORPORATE ---- */
  --gunmetal:      #2A2A33;
  --steel:         #3F3F46;
  --silver:        #D4D4D8;   /* silver accent */
  --silver-bright: #E8E8EC;

  /* ---- SEMANTIC (kept muted, not neon) ---- */
  --green:         #16A34A;
  --green-dim:     rgba(22,163,74,0.15);
  --red:           #DC2626;
  --red-dim:       rgba(220,38,38,0.15);
  --amber:         #D97706;
  --amber-dim:     rgba(217,119,6,0.15);

  /* ---- BORDERS (silver-led, purple only for active) ---- */
  --border:        rgba(255,255,255,0.06);
  --border-silver: rgba(212,212,216,0.10);
  --border-active: rgba(139,92,246,0.40);  /* purple ONLY for active/focus */
  --border2:       rgba(255,255,255,0.04);

  /* ---- TYPE ---- */
  --sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --display: 'Satoshi', 'Inter', sans-serif;
  --mono:    'JetBrains Mono', monospace;

  /* ---- GRADIENTS ---- */
  --grad-px: linear-gradient(135deg, #6D28D9 0%, #8B5CF6 50%, #C084FC 100%);
  --grad-stealth: linear-gradient(180deg, #050507 0%, #0B0B0F 50%, #111117 100%);

  /* ---- ELEVATION ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow:    0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.6);
  --glow-purple: 0 0 24px rgba(139,92,246,0.25);
}

/* ---- TYPOGRAPHY DEFAULTS ---- */
.px-display { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
.px-mono    { font-family: var(--mono); }

/* ============================================================
   LOGO SYSTEM
   ============================================================ */

/* Wordmark — wide-tracked premium type */
.px-wordmark {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.42em;
  color: var(--text);
  text-transform: uppercase;
  padding-left: 0.42em; /* optical balance for tracking */
}

/* Eye mark — inline SVG, recolors via currentColor */
.px-eye {
  display: inline-block;
  vertical-align: middle;
  color: var(--text);
}
.px-eye svg { display: block; }

/* Nav lockup: eye + wordmark side by side */
.px-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.px-lockup .px-wordmark { font-size: 18px; letter-spacing: 0.36em; }

/* Square icon tile (favicon / app contexts) */
.px-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border-silver);
  border-radius: 22%;
}

/* ---- STANDARD WORDMARK SIZES ---- */
.px-nav-wordmark  { height: 80px; width: auto; object-fit: contain; display: block; }
.px-foot-wordmark { height: 52px; width: auto; object-fit: contain; display: block; opacity: 0.9; }
@media (max-width: 640px) {
  .px-nav-wordmark  { height: 52px; }
  .px-foot-wordmark { height: 38px; }
}