/* NEXUS design tokens: every color, type size, space, radius, shadow and timing the website
   uses. Components read the semantic names (--nx-*); nothing else hardcodes a color.
   docs/NEXUS_WEB_ART_DIRECTION.md explains the choices. */
/* Self-hosted brand fonts (SIL Open Font License, see /assets/fonts/README.md). */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal; font-weight: 400 800; font-stretch: 75% 100%; font-display: swap;
  src: url('/assets/fonts/bricolage-grotesque-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal; font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
  src: url('/assets/fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* ---- Raw palette (only referenced from this file) ---- */
  --void-950: #05040B;
  --void-900: #0A0914;
  --void-850: #0F0D1B;
  --void-800: #141224;
  --void-750: #1B182E;
  --void-700: #242039;
  --dusk-600: #3B3457;
  --dusk-400: #8C86AA;
  --mist-300: #ABA6C2;
  --mist-100: #EEEAF6;
  --link-mint: #6EF5D2;   /* the Nexus Link: the glow at every avatar's neck */
  --lamp-amber: #FFB36B;  /* warm windows and lamps: energy, events, things happening */
  --sky: #7FC8FF;
  --violet: #B59BFF;
  --coral: #FF8FB1;

  /* ---- Semantic color ---- */
  --nx-bg: var(--void-900);
  --nx-bg-deep: var(--void-950);
  --nx-surface: var(--void-800);
  --nx-surface-raised: var(--void-750);
  --nx-surface-sunken: var(--void-850);
  --nx-surface-overlay: rgb(10 9 20 / 0.78);
  --nx-border: rgb(238 234 246 / 0.09);
  --nx-border-strong: rgb(238 234 246 / 0.18);
  --nx-border-control: rgb(238 234 246 / 0.4); /* inputs and checkboxes: 3:1 against their fill */
  --nx-text: var(--mist-100);
  --nx-text-muted: var(--mist-300);   /* 8.4:1 on --nx-bg */
  --nx-text-faint: var(--dusk-400);   /* 5:1 or better on every surface: captions only */
  --nx-accent: var(--link-mint);
  --nx-accent-strong: #A6FBE6;
  --nx-accent-ink: #04241C;           /* text on the accent */
  --nx-accent-soft: rgb(110 245 210 / 0.12);
  --nx-energy: var(--lamp-amber);
  --nx-energy-ink: #2B1703;
  --nx-energy-soft: rgb(255 179 107 / 0.13);
  --nx-focus: var(--link-mint);

  /* World and system states */
  --nx-state-live: var(--link-mint);
  --nx-state-event: var(--lamp-amber);
  --nx-state-soon: var(--violet);
  --nx-state-mystery: var(--coral);
  --nx-state-info: var(--sky);
  --nx-state-ended: var(--dusk-400);
  --nx-state-error: #FF8A8A;
  --nx-state-success: var(--link-mint);

  /* District colors (match the arches in NEXUS CITY) */
  --nx-district-plaza: var(--link-mint);
  --nx-district-exploration: var(--sky);
  --nx-district-social: var(--coral);
  --nx-district-spire: var(--lamp-amber);

  /* Rarity (the game's own values from content/catalog.json) */
  --nx-rarity-common: #B8BCC8;
  --nx-rarity-uncommon: #6FD9A8;
  --nx-rarity-rare: #5FA8FF;
  --nx-rarity-epic: #B18CFF;
  --nx-rarity-legendary: #FFB35C;
  --nx-rarity-mythic: #FF6F91;

  /* Atmosphere */
  --nx-glow-accent: 0 0 24px rgb(110 245 210 / 0.35);
  --nx-haze: radial-gradient(120% 70% at 50% 0%, rgb(91 60 160 / 0.22), transparent 70%);

  /* ---- Typography ---- */
  --nx-font-display: 'Bricolage Grotesque', 'Arial Narrow', system-ui, sans-serif;
  --nx-font-body: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif;
  --nx-display-stretch: 78%;

  --nx-fs-display-xl: clamp(3.1rem, 1.2rem + 7.2vw, 7.6rem);
  --nx-fs-display-l: clamp(2.6rem, 1.3rem + 4.6vw, 5.4rem);
  --nx-fs-display-m: clamp(2.1rem, 1.3rem + 2.9vw, 3.9rem);
  --nx-fs-heading-xl: clamp(1.7rem, 1.25rem + 1.5vw, 2.4rem);
  --nx-fs-heading-l: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
  --nx-fs-heading-m: 1.2rem;
  --nx-fs-body-l: clamp(1.06rem, 1rem + 0.25vw, 1.2rem);
  --nx-fs-body-m: 1rem;
  --nx-fs-body-s: 0.875rem;
  --nx-fs-caption: 0.76rem;

  --nx-lh-display: 0.9;
  --nx-lh-heading: 1.08;
  --nx-lh-body: 1.6;
  --nx-tracking-display: -0.005em;
  --nx-tracking-caps: 0.14em;
  --nx-measure: 62ch;

  /* ---- Space (4px base) ---- */
  --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: 48px;
  --nx-space-8: 64px;
  --nx-space-9: 96px;
  --nx-space-10: 144px;
  --nx-section-y: clamp(72px, 9vw, 136px);
  --nx-gutter: clamp(16px, 4vw, 40px);
  --nx-container: 1240px;
  --nx-container-narrow: 820px;
  --nx-nav-h: 68px;

  /* ---- Shape ---- */
  --nx-radius-sm: 6px;
  --nx-radius-md: 12px;
  --nx-radius-lg: 18px;
  --nx-radius-xl: 28px;
  --nx-radius-round: 999px;
  /* The rift cut: NEXUS controls lose two opposite corners, like a gate seen edge-on. */
  --nx-cut: 10px;
  --nx-cut-shape: polygon(var(--nx-cut) 0, 100% 0, 100% calc(100% - var(--nx-cut)), calc(100% - var(--nx-cut)) 100%, 0 100%, 0 var(--nx-cut));

  /* ---- Elevation ---- */
  --nx-shadow-1: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 8px 24px -12px rgb(0 0 0 / 0.6);
  --nx-shadow-2: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 18px 48px -18px rgb(0 0 0 / 0.75);
  --nx-shadow-3: 0 1px 0 rgb(255 255 255 / 0.06) inset, 0 30px 80px -24px rgb(0 0 0 / 0.85);

  /* ---- Motion ---- */
  --nx-dur-micro: 140ms;
  --nx-dur-ui: 240ms;
  --nx-dur-large: 480ms;
  --nx-dur-cinematic: 950ms;
  --nx-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --nx-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
  --nx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- Layers ---- */
  --nx-z-nav: 50;
  --nx-z-menu: 60;
  --nx-z-modal: 80;
  --nx-z-toast: 90;

  /* ---- Legacy names (admin and lab pages still use these) ---- */
  --ink-950: var(--void-950);
  --ink-900: var(--void-900);
  --ink-800: var(--void-800);
  --ink-700: var(--void-700);
  --line: #262739;
  --line-strong: #3A3B52;
  --pearl: var(--mist-100);
  --muted: var(--mist-300);
  --mint: var(--link-mint);
  --amber: var(--lamp-amber);
  --r-common: var(--nx-rarity-common);
  --r-uncommon: var(--nx-rarity-uncommon);
  --r-rare: var(--nx-rarity-rare);
  --r-epic: var(--nx-rarity-epic);
  --r-legendary: var(--nx-rarity-legendary);
  --r-mythic: var(--nx-rarity-mythic);
  --font-display: var(--nx-font-display);
  --font-body: var(--nx-font-body);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --nx-dur-micro: 1ms;
    --nx-dur-ui: 1ms;
    --nx-dur-large: 1ms;
    --nx-dur-cinematic: 1ms;
  }
}