/* ==========================================================================
   Nemixar design tokens
   Fonts, palette, spacing, shadows, gradients, and semantic type helpers.
   ========================================================================== */

@font-face {
  font-family: "Alphakind";
  src: url("../fonts/Alphakind.ttf") format("truetype"),
       url("../fonts/Alphakind.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --nx-cyan: #00F4FF;
  --nx-blue: #0566AA;
  --nx-red: #BC2817;
  --nx-white: #FFFFFF;

  --nx-navy-900: #0E1E4F;
  --nx-navy-800: #1C2B6B;
  --nx-navy-700: #2A3B85;
  --nx-blue-600: #3B7BD1;
  --nx-blue-500: #4FA8F5;
  --nx-cyan-200: #7AE8F2;

  --nx-yellow: #FBC52F;
  --nx-yellow-deep: #E39A0B;
  --nx-orange: #F47C2B;
  --nx-magenta: #E23A8B;

  --nx-text-primary: #0F172A;
  --nx-text-secondary: #64748B;
  --nx-text-tertiary: #94A3B8;
  --nx-text-inverse: #FFFFFF;

  --nx-bg: #F8FAFC;
  --nx-bg-card: #FFFFFF;
  --nx-border: #E2E8F0;
  --nx-border-subtle: #F1F5F9;
  --nx-surface-2: #F1F5F9;
  --nx-surface-3: #E2E8F0;
  --nx-ink-800: #1E293B;
  --nx-ink-600: #475569;

  --nx-accent-blue: #3B82F6;
  --nx-accent-blue-bg: #DBEAFE;
  --nx-accent-blue-tint: #EFF6FF;
  --nx-accent-purple: #8B5CF6;
  --nx-accent-purple-bg: #EDE9FE;
  --nx-accent-purple-tint: #F5F3FF;
  --nx-accent-teal: #14B8A6;
  --nx-accent-teal-bg: #CCFBF1;
  --nx-accent-teal-tint: #F0FDFA;
  --nx-accent-green: #10B981;
  --nx-accent-green-bg: #DCFCE7;
  --nx-accent-green-tint: #F0FDF4;
  --nx-accent-amber: #F59E0B;
  --nx-accent-amber-bg: #FEF3C7;
  --nx-accent-amber-tint: #FFFBEB;
  --nx-accent-rose: #E11D48;
  --nx-accent-rose-bg: #FECDD3;
  --nx-accent-rose-tint: #FFE4E6;
  --nx-accent-indigo: #6366F1;
  --nx-accent-indigo-bg: #E0E7FF;
  --nx-accent-indigo-tint: #EEF2FF;

  --nx-success: #10B981;
  --nx-success-bg: #DCFCE7;
  --nx-success-deep: #065F46;
  --nx-info: #3B82F6;
  --nx-info-bg: #DBEAFE;
  --nx-info-deep: #1E40AF;
  --nx-warning: #F59E0B;
  --nx-warning-bg: #FEF3C7;
  --nx-warning-deep: #92400E;
  --nx-danger: #BC2817;
  --nx-danger-bg: #FEE2E2;
  --nx-danger-deep: #7F1D1D;

  --nx-rarity-common: #8FA3C7;
  --nx-rarity-rare: #3B82F6;
  --nx-rarity-epic: #8B5CF6;
  --nx-rarity-legendary: #FBC52F;

  --nx-font-display: "Alphakind", "Luckiest Guy", "Bangers", system-ui, sans-serif;
  --nx-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --nx-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --nx-fs-h0: 4rem;
  --nx-fs-h1: 3rem;
  --nx-fs-h2: 2.25rem;
  --nx-fs-h3: 1.5rem;
  --nx-fs-h4: 1.25rem;
  --nx-fs-body: 1rem;
  --nx-fs-sm: 0.875rem;
  --nx-fs-xs: 0.75rem;

  --nx-lh-tight: 1.1;
  --nx-lh-title: 1.2;
  --nx-lh-body: 1.45;

  --nx-tracking-title: -0.01em;
  --nx-tracking-caps: 0.06em;
  --nx-tracking-body: 0;

  --nx-radius-xs: 4px;
  --nx-radius-sm: 8px;
  --nx-radius-md: 12px;
  --nx-radius-lg: 16px;
  --nx-radius-xl: 24px;
  --nx-radius-pill: 999px;

  --nx-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.06);
  --nx-shadow-raise: 0 8px 24px rgba(14, 30, 79, 0.12);
  --nx-shadow-pop: 0 10px 0 0 rgba(14, 30, 79, 0.25);
  --nx-shadow-glow-cyan: 0 0 24px rgba(0, 244, 255, 0.45);
  --nx-shadow-glow-blue: 0 0 32px rgba(5, 102, 170, 0.45);
  --nx-shadow-inner: inset 0 2px 0 rgba(255, 255, 255, 0.35);

  --nx-space-1: 4px;
  --nx-space-2: 8px;
  --nx-space-3: 12px;
  --nx-space-4: 16px;
  --nx-space-5: 24px;
  --nx-space-6: 32px;
  --nx-space-7: 40px;
  --nx-space-8: 60px;
  --nx-space-9: 80px;

  --nx-grad-hero: linear-gradient(135deg, #0E1E4F 0%, #0566AA 55%, #00F4FF 100%);
  --nx-grad-night: linear-gradient(180deg, #0E1E4F 0%, #1C2B6B 100%);
  --nx-grad-sky: linear-gradient(180deg, #3B7BD1 0%, #4FA8F5 100%);
  --nx-grad-neon: linear-gradient(90deg, #00F4FF 0%, #E23A8B 100%);
  --nx-grad-gold: linear-gradient(180deg, #FBC52F 0%, #E39A0B 100%);
  --nx-grad-red: linear-gradient(180deg, #E84732 0%, #BC2817 100%);
}

.nx-hero-title,
.nx-h0 {
  font-family: var(--nx-font-display);
  font-weight: 400;
  font-size: var(--nx-fs-h0);
  line-height: var(--nx-lh-tight);
  letter-spacing: var(--nx-tracking-title);
  color: var(--nx-white);
}

.nx-h1 {
  font-family: var(--nx-font-body);
  font-weight: 900;
  font-size: var(--nx-fs-h1);
  line-height: var(--nx-lh-title);
  letter-spacing: var(--nx-tracking-title);
  color: var(--nx-text-primary);
}

.nx-h2 {
  font-family: var(--nx-font-body);
  font-weight: 800;
  font-size: var(--nx-fs-h2);
  line-height: var(--nx-lh-title);
  letter-spacing: var(--nx-tracking-title);
  color: var(--nx-text-primary);
}

.nx-h3 {
  font-family: var(--nx-font-body);
  font-weight: 700;
  font-size: var(--nx-fs-h3);
  line-height: var(--nx-lh-title);
  color: var(--nx-text-primary);
}

.nx-h4 {
  font-family: var(--nx-font-body);
  font-weight: 600;
  font-size: var(--nx-fs-h4);
  line-height: var(--nx-lh-title);
  color: var(--nx-text-primary);
}

.nx-body {
  font-family: var(--nx-font-body);
  font-weight: 400;
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-body);
  color: var(--nx-text-primary);
}

.nx-body-muted {
  font-family: var(--nx-font-body);
  font-weight: 400;
  font-size: var(--nx-fs-body);
  line-height: var(--nx-lh-body);
  color: var(--nx-text-secondary);
}

.nx-small {
  font-family: var(--nx-font-body);
  font-weight: 500;
  font-size: var(--nx-fs-sm);
  line-height: var(--nx-lh-body);
  color: var(--nx-text-secondary);
}

.nx-label {
  font-family: var(--nx-font-body);
  font-weight: 700;
  font-size: var(--nx-fs-xs);
  line-height: 1.2;
  letter-spacing: var(--nx-tracking-caps);
  text-transform: uppercase;
  color: var(--nx-text-secondary);
}

.nx-display {
  font-family: var(--nx-font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--nx-white);
  text-shadow: 0 3px 0 rgba(14, 30, 79, 0.35);
}