/* ─────────────────────────────────────────────────────────
   Nexus AI Solutions · Design Tokens · v1.1
   Drop this file into any consumer project:
       <link rel="stylesheet" href="/tokens.css">
   All tokens are prefixed --nx- to avoid collision.
   ───────────────────────────────────────────────────────── */

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --nx-abyss:           #07060F;
  --nx-void:            #0D0B1A;
  --nx-void-elev:       #14102B;
  --nx-hairline:        rgba(184,168,224,0.10);
  --nx-hairline-strong: rgba(184,168,224,0.22);

  /* ── Primary accents ──────────────────────────────────── */
  --nx-cyan:            #00F5FF;
  --nx-cyan-soft:       rgba(0,245,255,0.16);
  --nx-violet:          #8A6FFF;
  --nx-ember:           #FFB266;

  /* ── Semantic (mapped onto primaries; edit MEANING here,
        never invent new colors) ─────────────────────────── */
  --nx-success:         var(--nx-cyan);
  --nx-info:            var(--nx-violet);
  --nx-warning:         var(--nx-ember);
  --nx-danger:          #FF5E7E;

  /* ── Sub-brand tints (structural, not chromatic — reserve
        cyan as the family accent; these only tint atmosphere) */
  --nx-nexus-atm:       rgba(0,245,255,0.10);
  --nx-morphic-atm:     rgba(138,111,255,0.10);
  --nx-sovereign-atm:   rgba(255,178,102,0.10);

  /* ── Data-viz sequential (cyan → violet → ember, 6 steps) */
  --nx-viz-1: #00F5FF;
  --nx-viz-2: #56D9F5;
  --nx-viz-3: #8CB6E9;
  --nx-viz-4: #A093DB;
  --nx-viz-5: #B87FBC;
  --nx-viz-6: #FFB266;

  /* ── Data-viz diverging (cyan · void · ember, 3 steps) */
  --nx-viz-neg: #00F5FF;
  --nx-viz-neu: #6B5F8E;
  --nx-viz-pos: #FFB266;

  /* ── Text (WCAG AA/AAA on Abyss) ──────────────────────── */
  --nx-text:            #E8E0FF;   /* 14.8:1  AAA */
  --nx-text-dim:        #B8A8E0;   /*  9.1:1  AAA */
  --nx-text-mute:       #9A8DBE;   /*  7.1:1  AAA */
  --nx-text-deco:       #6B5F8E;   /*  4.2:1  chrome only */

  /* ── Type ─────────────────────────────────────────────── */
  --nx-font-ui:   'Space Grotesk', -apple-system, system-ui, sans-serif;
  --nx-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ── Spacing · 4pt grid ───────────────────────────────── */
  --nx-s-1:  4px;  --nx-s-2:  8px;  --nx-s-3: 12px;  --nx-s-4: 16px;
  --nx-s-5: 24px;  --nx-s-6: 32px;  --nx-s-7: 48px;  --nx-s-8: 64px;  --nx-s-9: 96px;

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

  /* ── Elevation ────────────────────────────────────────── */
  --nx-e-0: none;
  --nx-e-1: 0 1px 2px rgba(0,0,0,0.4);
  --nx-e-2: 0 4px 12px rgba(0,0,0,0.45), 0 0 0 1px var(--nx-hairline);
  --nx-e-3: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px var(--nx-hairline);
  --nx-glow-cyan:  0 0 24px rgba(0,245,255,0.35);
  --nx-glow-ember: 0 0 24px rgba(255,178,102,0.30);

  /* ── Motion ───────────────────────────────────────────── */
  --nx-t-fast: 120ms;
  --nx-t-ui:   200ms;
  --nx-t-slow: 360ms;
  --nx-t-hero: 1000ms;
  --nx-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --nx-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── Base reset ────────────────────────────────────────── */
html, body { margin: 0; padding: 0; }
body {
  background: var(--nx-abyss);
  color: var(--nx-text);
  font-family: var(--nx-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv11";
}
code, pre, .nx-mono, [data-mono] {
  font-family: var(--nx-font-mono);
  font-feature-settings: "tnum","zero","ss01";
  font-variant-numeric: tabular-nums slashed-zero;
}
a { color: var(--nx-cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--nx-cyan);
  outline-offset: 2px;
  border-radius: var(--nx-r-sm);
}
::selection { background: var(--nx-cyan); color: var(--nx-abyss); }

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:    0.001ms !important;
    animation-iteration-count: 1   !important;
    transition-duration:   0.001ms !important;
  }
}

/* ── Cursor: precision reticle for high-density surfaces
      Add class="nx-precision" on the surface root. ─────── */
.nx-precision, .nx-precision * { cursor: crosshair; }

/* ── Loading skeleton: diamond pulse
      <span class="nx-skel" style="width:120px;height:16px"></span> */
@keyframes nx-skel-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}
.nx-skel {
  display: inline-block;
  background: linear-gradient(120deg,
    var(--nx-void) 20%, var(--nx-void-elev) 50%, var(--nx-void) 80%);
  border: 1px solid var(--nx-hairline);
  border-radius: var(--nx-r-sm);
  animation: nx-skel-pulse 1.4s var(--nx-ease-inout) infinite;
}


/* ═════════════════════════════════════════════════════════
   v1.2 · Final excellence layer
   ═════════════════════════════════════════════════════════ */

html { color-scheme: dark; }

/* Fluid typography — clamp() headings so they never overflow narrow embed contexts */
:root {
  --nx-fs-display: clamp(40px, 6vw, 72px);
  --nx-fs-h1:      clamp(30px, 4vw, 44px);
  --nx-fs-h2:      clamp(22px, 2.6vw, 28px);
  --nx-fs-body:    16px;
}

/* Text primitives — safe wrapping in any container */
p, li, h1, h2, h3, h4 {
  text-wrap: pretty;
  overflow-wrap: anywhere;
  hyphens: auto;
}

/* Skip-to-content — invisible until focused */
.nx-skip {
  position: absolute; left: -9999px; top: 0;
  padding: 12px 18px;
  background: var(--nx-cyan); color: var(--nx-abyss);
  font-family: var(--nx-font-mono); font-weight: 600;
  border-radius: var(--nx-r-md);
  z-index: 9999;
}
.nx-skip:focus { left: 16px; top: 16px; }

/* Forced-colors mode (Windows High Contrast) */
@media (forced-colors: active) {
  .nx-skel { animation: none; background: Canvas; border-color: CanvasText; }
  button, a { forced-color-adjust: none; }
}

/* Reduced transparency — swap glass surfaces for opaque */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --nx-hairline: rgba(184,168,224,0.40);
    --nx-cyan-soft: #142B3A;
  }
}

/* Print — brand-safe, ink-efficient */
@media print {
  :root {
    --nx-abyss: #FFFFFF;
    --nx-void: #FFFFFF;
    --nx-void-elev: #F5F5FA;
    --nx-text: #07060F;
    --nx-text-dim: #14102B;
    --nx-text-mute: #4A4266;
    --nx-cyan: #00A8B0; /* darkened for AA on white */
    --nx-hairline: rgba(20,16,43,0.12);
  }
  body { background: #FFFFFF !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
  a { text-decoration: underline; }
  .nx-skel { display: none; }
}


/* ═════════════════════════════════════════════════════════
   v1.3 · Mobile-elite layer
   ═════════════════════════════════════════════════════════ */

:root {
  /* Breakpoints (min-width query targets) */
  --nx-bp-sm:  480px;
  --nx-bp-md:  768px;
  --nx-bp-lg: 1024px;
  --nx-bp-xl: 1280px;

  /* Touch — Apple HIG + Google Material minimums */
  --nx-touch-min: 44px;
  --nx-touch-cozy: 48px;
  --nx-touch-large: 56px;

  /* Safe areas (iOS notch, Android nav, foldables) */
  --nx-safe-top:    env(safe-area-inset-top, 0px);
  --nx-safe-right:  env(safe-area-inset-right, 0px);
  --nx-safe-bottom: env(safe-area-inset-bottom, 0px);
  --nx-safe-left:   env(safe-area-inset-left, 0px);
}

/* Buttons + form controls auto-scale to touch minimum on coarse pointers */
@media (pointer: coarse) {
  button, [role="button"], input, select, textarea, a[data-touch] {
    min-height: var(--nx-touch-min);
  }
  input, select, textarea { font-size: 16px; } /* Prevents iOS zoom-on-focus */
}

/* Prevent horizontal scroll on any consumer page */
html, body { overflow-x: clip; overscroll-behavior-y: contain; }

/* Tap-highlight — replace ugly OS blue with brand cyan */
* { -webkit-tap-highlight-color: rgba(0,245,255,0.20); }

/* Safe-area padded root — add class="nx-safe" on top-level app shells */
.nx-safe {
  padding-top:    var(--nx-safe-top);
  padding-right:  var(--nx-safe-right);
  padding-bottom: var(--nx-safe-bottom);
  padding-left:   var(--nx-safe-left);
}

/* Sticky bottom sheets / tab bars respect the home indicator */
.nx-tab-bar {
  padding-bottom: calc(var(--nx-s-3) + var(--nx-safe-bottom));
}

/* Container queries — components reflow to their PARENT, not the viewport
   (essential when a card lands in a narrow column) */
[data-nx-container] { container-type: inline-size; }

/* Momentum scroll on iOS containers */
[data-nx-scroll] {
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
[data-nx-scroll]::-webkit-scrollbar { display: none; }
[data-nx-scroll] > * { scroll-snap-align: start; }

/* Elite mobile focus ring — thicker on touch, thinner on mouse */
@media (pointer: coarse) {
  a:focus-visible, button:focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}