/* ============================================================
   NC RECOVERY PORTAL — Design Tokens
   Bright surface · navy anchors · electric-blue action color
   ============================================================ */

:root {
  /* === NAVY PALETTE (used for sidebar, command bars, login hero) === */
  --nc-navy-900:    #050B17;
  --nc-navy-800:    #0A1628;
  --nc-navy-700:    #0F1D33;
  --nc-navy-600:    #142236;
  --nc-navy-500:    #1A2A3E;
  --nc-navy-400:    #243650;
  --nc-navy-300:    #2E4366;
  --nc-navy-200:    #4A6488;
  --nc-navy-100:    #7E94B5;

  /* === BRIGHT SURFACES (default) === */
  --nc-white:       #FFFFFF;
  --nc-cream:       #F5F8FC;
  --nc-cream-2:     #EEF3FA;
  --nc-cream-3:     #E8EEF7;
  --nc-line:        #E2E8F0;
  --nc-line-soft:   #F1F5F9;
  --nc-ink:         #0A1628;
  --nc-ink-soft:    #1E293B;
  --nc-mute:        #475569;
  --nc-mute-soft:   #64748B;
  --nc-mute-dim:    #94A3B8;

  /* === SIGNAL BLUE — the action color === */
  --nc-blue:        #0088DD;
  --nc-blue-bright: #1AA0F0;
  --nc-blue-hot:    #00B4FF;
  --nc-blue-dark:   #006FB5;
  --nc-blue-deep:   #00568C;
  --nc-blue-glow:   rgba(0, 136, 221, 0.25);
  --nc-blue-glow-2: rgba(0, 136, 221, 0.45);
  --nc-blue-tint:   rgba(0, 136, 221, 0.08);
  --nc-blue-tint-2: rgba(0, 136, 221, 0.16);
  --nc-blue-tint-3: rgba(0, 136, 221, 0.28);

  /* gradient stops for energy */
  --nc-grad-blue:    linear-gradient(135deg, #00B4FF 0%, #0088DD 50%, #006FB5 100%);
  --nc-grad-blue-soft: linear-gradient(135deg, rgba(26,160,240,0.12), rgba(0,136,221,0.04));
  --nc-grad-hero:    linear-gradient(135deg, #050B17 0%, #0A1628 40%, #0F2A4A 100%);
  --nc-grad-cream:   linear-gradient(180deg, #FFFFFF 0%, #F5F8FC 100%);

  /* === STATUS COLORS === */
  --nc-success:     #14B871;
  --nc-success-bg:  #DCFCE7;
  --nc-success-tint:rgba(20, 184, 113, 0.12);
  --nc-warn:        #F59E0B;
  --nc-warn-bg:     #FEF3C7;
  --nc-warn-tint:   rgba(245, 158, 11, 0.14);
  --nc-danger:      #E11D48;
  --nc-danger-bg:   #FEE2E2;
  --nc-danger-tint: rgba(225, 29, 72, 0.10);
  --nc-live:        #FF1F4F;
  --nc-live-glow:   rgba(255, 31, 79, 0.35);
  --nc-live-bg:     rgba(255, 31, 79, 0.10);

  /* === TYPOGRAPHY === */
  --nc-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
  --nc-font-body:    'Inter Tight', system-ui, sans-serif;
  --nc-font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --nc-fs-xs:    11px;
  --nc-fs-sm:    13px;
  --nc-fs-base:  14px;
  --nc-fs-md:    15px;
  --nc-fs-lg:    17px;
  --nc-fs-xl:    20px;
  --nc-fs-2xl:   26px;
  --nc-fs-3xl:   34px;
  --nc-fs-4xl:   46px;
  --nc-fs-5xl:   62px;

  --nc-fw-normal: 400;
  --nc-fw-mid:    500;
  --nc-fw-semi:   600;
  --nc-fw-bold:   700;
  --nc-fw-black:  800;

  --nc-tracking-tight:  -0.02em;
  --nc-tracking-normal: 0;
  --nc-tracking-wide:   0.06em;
  --nc-tracking-ultra:  0.18em;

  --nc-leading-tight:   1.15;
  --nc-leading-snug:    1.3;
  --nc-leading-normal:  1.5;
  --nc-leading-relaxed: 1.65;

  /* === SHAPE === */
  --nc-r-xs:     2px;
  --nc-r-sm:     6px;
  --nc-r-md:     10px;
  --nc-r-lg:     14px;
  --nc-r-xl:     20px;
  --nc-r-pill:   999px;

  /* === ELEVATION (light surfaces) === */
  --nc-shadow-xs:   0 1px 2px rgba(10, 22, 40, 0.06);
  --nc-shadow-sm:   0 2px 6px rgba(10, 22, 40, 0.06), 0 1px 2px rgba(10, 22, 40, 0.04);
  --nc-shadow-md:   0 4px 16px rgba(10, 22, 40, 0.08), 0 2px 4px rgba(10, 22, 40, 0.04);
  --nc-shadow-lg:   0 16px 48px rgba(10, 22, 40, 0.12), 0 4px 12px rgba(10, 22, 40, 0.06);
  --nc-shadow-xl:   0 28px 80px rgba(10, 22, 40, 0.18);
  --nc-shadow-glow: 0 0 0 4px rgba(0, 136, 221, 0.12), 0 8px 24px rgba(0, 136, 221, 0.20);
  --nc-shadow-glow-strong: 0 0 0 6px rgba(0, 136, 221, 0.16), 0 16px 40px rgba(0, 136, 221, 0.32);
  --nc-shadow-blue: 0 6px 20px rgba(0, 136, 221, 0.32), 0 1px 3px rgba(0, 136, 221, 0.18);

  /* dark-surface elevation (for sidebar / command bars) */
  --nc-shadow-dark-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --nc-shadow-dark-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --nc-shadow-dark-lg: 0 16px 48px rgba(0, 0, 0, 0.45);

  /* === MOTION === */
  --nc-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --nc-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --nc-ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --nc-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  --nc-dur-fast:   140ms;
  --nc-dur-base:   220ms;
  --nc-dur-slow:   400ms;
  --nc-dur-slower: 700ms;

  /* === LAYOUT === */
  --nc-sidebar-w:           260px;
  --nc-sidebar-w-collapsed: 72px;
  --nc-header-h:            64px;
  --nc-content-max:         1440px;
  --nc-content-pad:         clamp(16px, 2.5vw, 32px);

  /* === Z-INDEX === */
  --nc-z-base:     1;
  --nc-z-sticky:   100;
  --nc-z-sidebar:  200;
  --nc-z-header:   300;
  --nc-z-dropdown: 400;
  --nc-z-overlay:  500;
  --nc-z-modal:    600;
  --nc-z-toast:    700;
}

/* ============================================================
   SEMANTIC TOKENS
   These are what components consume. Override the *values* above
   to retheme; never hardcode raw colours in components.
   ============================================================ */

:root, html[data-theme="light"], html:not([data-theme]) {
  --nc-bg-page:     var(--nc-cream);
  --nc-bg-surface:  var(--nc-white);
  --nc-bg-raised:   var(--nc-white);
  --nc-bg-card:     var(--nc-white);
  --nc-bg-hover:    var(--nc-cream-2);
  --nc-bg-input:    var(--nc-white);
  --nc-border:      var(--nc-line);
  --nc-border-soft: var(--nc-line-soft);
  --nc-text:        var(--nc-ink);
  --nc-text-strong: var(--nc-ink);
  --nc-text-muted:  var(--nc-mute);
  --nc-text-dim:    var(--nc-mute-soft);
  color-scheme: light;
}

/* Dark theme kept around for the few surfaces that opt in */
html[data-theme="dark"] {
  --nc-bg-page:     var(--nc-navy-800);
  --nc-bg-surface:  var(--nc-navy-700);
  --nc-bg-raised:   var(--nc-navy-700);
  --nc-bg-card:     var(--nc-navy-600);
  --nc-bg-hover:    var(--nc-navy-500);
  --nc-bg-input:    var(--nc-navy-700);
  --nc-border:      var(--nc-navy-400);
  --nc-border-soft: var(--nc-navy-300);
  --nc-text:        #E2E8F0;
  --nc-text-strong: #FFFFFF;
  --nc-text-muted:  var(--nc-navy-100);
  --nc-text-dim:    var(--nc-navy-200);
  color-scheme: dark;
}

/* ============================================================
   ATMOSPHERIC BACKGROUNDS (for hero / command surfaces)
   ============================================================ */

.nc-bg-grid {
  background-image:
    linear-gradient(var(--nc-blue-tint) 1px, transparent 1px),
    linear-gradient(90deg, var(--nc-blue-tint) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 0 0;
}

.nc-bg-scan::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    0deg, transparent 0, transparent 3px,
    rgba(255, 255, 255, 0.012) 3px, rgba(255, 255, 255, 0.012) 4px
  );
  z-index: 1;
}