/* ============================================================
   NTL DESIGN TOKENS — single source of truth
   Loaded FIRST on every layout, before all other NTL css.
   :root holds LIGHT values (site default); [data-bs-theme=dark]
   overrides. Components must consume tokens, never raw colors.
   ============================================================ */

:root {
  /* ---- Backgrounds ---- */
  --ntl-bg:                #f6f8fb;
  --ntl-bg-subtle:         #eef1f7;
  --ntl-bg-gradient:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(59, 130, 246, 0.05) 0%, transparent 70%);

  /* ---- Surfaces ---- */
  --ntl-surface:           #ffffff;
  --ntl-surface-2:         #f8fafd;
  --ntl-surface-hover:     #f2f5fa;

  /* ---- Borders ---- */
  --ntl-border:            rgba(15, 23, 42, 0.08);
  --ntl-border-strong:     rgba(15, 23, 42, 0.16);
  --ntl-border-hover:      rgba(37, 99, 235, 0.3);

  /* ---- Text ---- */
  --ntl-text:              #0f172a;
  --ntl-text-2:            #475569;
  --ntl-text-3:            #94a3b8;
  --ntl-text-label:        #2563eb;
  --ntl-text-invert:       #ffffff;

  /* ---- Brand ---- */
  --ntl-blue:              #2563eb;
  --ntl-blue-strong:       #1d4ed8;
  --ntl-blue-light:        #3b82f6;
  --ntl-blue-dim:          rgba(37, 99, 235, 0.08);
  --ntl-blue-rgb:          37, 99, 235;
  --ntl-purple:            #7c3aed;
  --ntl-purple-dim:        rgba(124, 58, 237, 0.08);
  --ntl-indigo:            #4f46e5;
  --ntl-gradient:          linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);

  /* ---- Semantic ---- */
  --ntl-success:           #16a34a;
  --ntl-success-dim:       rgba(22, 163, 74, 0.1);
  --ntl-warning:           #b45309;
  --ntl-warning-dim:       rgba(180, 83, 9, 0.1);
  --ntl-danger:            #dc2626;
  --ntl-danger-dim:        rgba(220, 38, 38, 0.1);
  --ntl-info:              #0891b2;
  --ntl-info-dim:          rgba(8, 145, 178, 0.1);

  /* ---- Accessible text variants (WCAG AA for small label text on light surfaces) ---- */
  --ntl-text-muted:        #586473;
  --ntl-blue-text:         #1d4ed8;
  --ntl-success-text:      #147336;
  --ntl-danger-text:       #b91c1c;
  --ntl-warning-text:      #9a4708;
  --ntl-info-text:         #0b6b86;

  /* ---- Typography ---- */
  --ntl-font-sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --ntl-font-mono:         'JetBrains Mono', 'Roboto Mono', Consolas, monospace;
  --ntl-fs-3xs:            10px;
  --ntl-fs-2xs:            11px;
  --ntl-fs-xs:             12px;
  --ntl-fs-sm:             13px;
  --ntl-fs-base:           14px;
  --ntl-fs-md:             16px;
  --ntl-fs-lg:             18px;
  --ntl-fs-xl:             22px;
  --ntl-fs-2xl:            28px;
  --ntl-fs-3xl:            36px;

  /* ---- Spacing ---- */
  --ntl-space-1:           4px;
  --ntl-space-2:           8px;
  --ntl-space-3:           12px;
  --ntl-space-4:           16px;
  --ntl-space-5:           20px;
  --ntl-space-6:           24px;
  --ntl-space-7:           32px;
  --ntl-space-8:           40px;
  --ntl-space-9:           48px;
  --ntl-space-10:          64px;

  /* ---- Radii ---- */
  --ntl-radius-sm:         8px;
  --ntl-radius:            12px;
  --ntl-radius-lg:         16px;
  --ntl-radius-full:       999px;

  /* ---- Elevation ---- */
  --ntl-shadow-sm:         0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
  --ntl-shadow-md:         0 2px 4px rgba(15, 23, 42, 0.04), 0 6px 16px rgba(15, 23, 42, 0.08);
  --ntl-shadow-lg:         0 4px 8px rgba(15, 23, 42, 0.05), 0 16px 40px rgba(15, 23, 42, 0.12);
  --ntl-focus-ring:        0 0 0 3px var(--ntl-blue-dim);

  /* ---- Motion ---- */
  --ntl-transition-fast:   0.15s ease;
  --ntl-transition:        0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-bs-theme=dark] {
  /* ---- Backgrounds ---- */
  --ntl-bg:                #0a0e1a;
  --ntl-bg-subtle:         #101624;
  --ntl-bg-gradient:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(59, 130, 246, 0.1) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 70%);

  /* ---- Surfaces ---- */
  --ntl-surface:           #131a2b;
  --ntl-surface-2:         #18213a;
  --ntl-surface-hover:     #1c263b;

  /* ---- Borders ---- */
  --ntl-border:            rgba(255, 255, 255, 0.08);
  --ntl-border-strong:     rgba(255, 255, 255, 0.16);
  --ntl-border-hover:      rgba(99, 179, 237, 0.3);

  /* ---- Text ---- */
  --ntl-text:              #f0f4ff;
  --ntl-text-2:            rgba(220, 230, 255, 0.62);
  --ntl-text-3:            rgba(200, 215, 255, 0.38);
  --ntl-text-label:        rgba(99, 179, 237, 0.85);
  --ntl-text-invert:       #0f172a;

  /* ---- Brand ---- */
  --ntl-blue:              #3b82f6;
  --ntl-blue-strong:       #2563eb;
  --ntl-blue-light:        #60a5fa;
  --ntl-blue-dim:          rgba(59, 130, 246, 0.12);
  --ntl-blue-rgb:          59, 130, 246;
  --ntl-purple:            #8b5cf6;
  --ntl-purple-dim:        rgba(139, 92, 246, 0.1);
  --ntl-indigo:            #6366f1;
  --ntl-gradient:          linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);

  /* ---- Semantic ---- */
  --ntl-success:           #22c55e;
  --ntl-success-dim:       rgba(34, 197, 94, 0.12);
  --ntl-warning:           #f59e0b;
  --ntl-warning-dim:       rgba(245, 158, 11, 0.12);
  --ntl-danger:            #ef4444;
  --ntl-danger-dim:        rgba(239, 68, 68, 0.12);
  --ntl-info:              #06b6d4;
  --ntl-info-dim:          rgba(6, 182, 212, 0.12);

  /* ---- Accessible text variants (WCAG AA for small label text on dark surfaces) ---- */
  --ntl-text-muted:        #94a3c4;
  --ntl-blue-text:         #3b82f6;
  --ntl-success-text:      #4ade80;
  --ntl-danger-text:       #f87171;
  --ntl-warning-text:      #fbbf24;
  --ntl-info-text:         #06b6d4;

  /* ---- Elevation (dark relies on border + surface step) ---- */
  --ntl-shadow-sm:         0 1px 2px rgba(0, 0, 0, 0.2);
  --ntl-shadow-md:         0 2px 4px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.3);
  --ntl-shadow-lg:         0 4px 8px rgba(0, 0, 0, 0.25), 0 16px 48px rgba(0, 0, 0, 0.4);
}