/*
 * Neron Signals — Design Tokens
 * Single source of truth for colors, spacing, typography, motion.
 * Loaded BEFORE feature CSS files so they can override Bootstrap variables.
 *
 * Brand identity preserved: dark base + amber/yellow accent (Neron yellow).
 * Everything else (component sizing, motion, surfaces) is modernised.
 */

:root {
  /* ── Colour palette ──────────────────────────────────────────── */
  /* Surfaces */
  --ns-surface-0:   #0c0e14;        /* page background — deepest */
  --ns-surface-1:   #161924;        /* card background */
  --ns-surface-2:   #1f2433;        /* raised card / hover */
  --ns-surface-3:   #2a3145;        /* input / focused row */
  --ns-surface-4:   #353c54;        /* divider / outline */

  /* Foreground */
  --ns-text-1:      #f3f5fb;        /* primary text */
  --ns-text-2:      #b6bcd0;        /* secondary text */
  --ns-text-3:      #7a8099;        /* muted / placeholder */
  --ns-text-4:      #565b73;        /* disabled */

  /* Brand */
  --ns-brand:       #f5b417;        /* Neron amber */
  --ns-brand-soft:  #f5b41733;      /* 20% alpha for backgrounds */
  --ns-brand-deep:  #c8910a;
  --ns-brand-glow:  0 0 0 4px #f5b41722;

  /* Semantics */
  --ns-success:     #1dcc70;
  --ns-success-soft:#1dcc7022;
  --ns-danger:      #ff396f;
  --ns-danger-soft: #ff396f22;
  --ns-warning:     #ffb547;
  --ns-info:        #4d9bff;

  /* Gradients used for hero, CTAs, badges */
  --ns-grad-hero:   radial-gradient(120% 80% at 0% 0%, #2c1f00 0%, #161924 55%, #0c0e14 100%);
  --ns-grad-brand:  linear-gradient(135deg, #f5b417 0%, #ff8a00 100%);
  --ns-grad-success:linear-gradient(135deg, #1dcc70 0%, #11a26b 100%);
  --ns-grad-danger: linear-gradient(135deg, #ff396f 0%, #c91e4d 100%);

  /* ── Typography scale ───────────────────────────────────────── */
  --ns-font-sans:   -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
                    Roboto, "Helvetica Neue", Arial, sans-serif;
  --ns-font-mono:   ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --ns-text-xs:     0.72rem;   /* 11.5 */
  --ns-text-sm:     0.82rem;   /* 13   */
  --ns-text-base:   0.95rem;   /* 15   */
  --ns-text-lg:     1.08rem;   /* 17   */
  --ns-text-xl:     1.30rem;   /* 21   */
  --ns-text-2xl:    1.65rem;   /* 26   */
  --ns-text-3xl:    2.10rem;   /* 33   */

  --ns-leading-tight:  1.2;
  --ns-leading-normal: 1.5;
  --ns-leading-relax:  1.7;

  /* ── Spacing scale (8-pt grid) ──────────────────────────────── */
  --ns-space-1:   4px;
  --ns-space-2:   8px;
  --ns-space-3:   12px;
  --ns-space-4:   16px;
  --ns-space-5:   20px;
  --ns-space-6:   24px;
  --ns-space-8:   32px;
  --ns-space-10:  40px;
  --ns-space-12:  48px;
  --ns-space-16:  64px;

  /* ── Radii ──────────────────────────────────────────────────── */
  --ns-radius-sm: 8px;
  --ns-radius-md: 12px;
  --ns-radius-lg: 18px;
  --ns-radius-xl: 24px;
  --ns-radius-pill: 999px;

  /* ── Elevation / shadow ─────────────────────────────────────── */
  --ns-shadow-sm:  0 1px 2px rgba(0,0,0,.30);
  --ns-shadow-md:  0 6px 16px rgba(0,0,0,.30);
  --ns-shadow-lg:  0 18px 40px rgba(0,0,0,.40);
  --ns-shadow-glow:0 0 24px rgba(245,180,23,.20);

  /* ── Motion ─────────────────────────────────────────────────── */
  --ns-ease:       cubic-bezier(.4, 0, .2, 1);
  --ns-ease-out:   cubic-bezier(.16, 1, .3, 1);
  --ns-dur-fast:   140ms;
  --ns-dur-base:   220ms;
  --ns-dur-slow:   360ms;

  /* ── z-index map ────────────────────────────────────────────── */
  --ns-z-sticky:   100;
  --ns-z-overlay:  900;
  --ns-z-modal:    1000;
  --ns-z-toast:    1100;
}

/*
 * Light-touch global resets that improve perceived polish without breaking
 * Bootstrap layouts. Scoped to text rendering, scrollbar, and focus rings.
 */
html { scroll-behavior: smooth; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Custom scrollbar (WebKit + Firefox) */
* { scrollbar-width: thin; scrollbar-color: var(--ns-surface-3) transparent; }
*::-webkit-scrollbar         { width: 8px; height: 8px; }
*::-webkit-scrollbar-track   { background: transparent; }
*::-webkit-scrollbar-thumb   { background: var(--ns-surface-3); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: var(--ns-surface-4); }

/* Subtle focus ring used by .ns-focusable + native buttons/inputs */
:where(button, a, input, textarea, select):focus-visible {
  outline: none;
  box-shadow: var(--ns-brand-glow);
  border-radius: 6px;
}

/*
 * Utility classes shared across the new components. Prefixed `ns-` to avoid
 * colliding with Bootstrap.
 */
.ns-surface-1 { background: var(--ns-surface-1); }
.ns-surface-2 { background: var(--ns-surface-2); }

.ns-text-muted     { color: var(--ns-text-3); }
.ns-text-secondary { color: var(--ns-text-2); }

.ns-pill {
  display: inline-flex; align-items: center; gap: var(--ns-space-2);
  padding: var(--ns-space-1) var(--ns-space-3);
  border-radius: var(--ns-radius-pill);
  font-size: var(--ns-text-xs); font-weight: 600;
  background: var(--ns-surface-2); color: var(--ns-text-2);
}
.ns-pill--success { background: var(--ns-success-soft); color: var(--ns-success); }
.ns-pill--danger  { background: var(--ns-danger-soft);  color: var(--ns-danger);  }
.ns-pill--brand   { background: var(--ns-brand-soft);   color: var(--ns-brand);   }

/* Skeleton shimmer used by every loading state */
@keyframes ns-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.ns-skeleton {
  background: linear-gradient(90deg,
    var(--ns-surface-2) 0%, var(--ns-surface-3) 50%, var(--ns-surface-2) 100%);
  background-size: 200% 100%;
  animation: ns-shimmer 1.4s linear infinite;
  border-radius: var(--ns-radius-sm);
}

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0ms !important;
    transition-duration: 0ms !important;
  }
}