/* ============================================================
   Nexus Design System — Layer 2: tokens
   Load AFTER the DevExpress Fluent theme bundle.
   Source of truth for all Nexus values. No component rules here.
   ============================================================ */

:root {
  /* ---- brand ramps ---------------------------------------- */
  --nexus-navy-900: #050E1A;
  --nexus-navy-800: #08172B;
  --nexus-navy-700: #0B1F3A;
  --nexus-blue-500: #2F6BFF;   /* Electric Blue support */
  --nexus-blue-400: #6E9BFF;
  --nexus-blue-200: #B9CDF5;

  --nexus-teal-500: #1CCFC9;   /* Teal Accent  */
  --nexus-teal-600: #15B8B2;   /* Teal Hover   */
  --nexus-teal-700: #0E8F8B;   /* text-safe teal (AA on white) */
  --nexus-teal-800: #0B7B77;
  --nexus-teal-100: #E6F8F7;

  --nexus-slate-0:   #FFFFFF;
  --nexus-slate-25:  #F7F9FC;
  --nexus-slate-50:  #EEF3F8;
  --nexus-slate-100: #E4EBF2;
  --nexus-slate-200: #D6E0EA;
  --nexus-slate-300: #B9C6D4;
  --nexus-slate-400: #94A3B4;
  --nexus-slate-500: #64748B;
  --nexus-slate-600: #475569;
  --nexus-slate-800: #1E293B;
  --nexus-slate-900: #0F172A;

  /* ---- semantic colors (light = primary theme) ------------ */
  --nexus-primary:          var(--nexus-navy-700);
  --nexus-primary-hover:    var(--nexus-navy-800);
  --nexus-primary-active:   var(--nexus-navy-900);
  --nexus-primary-subtle:   var(--nexus-slate-50);
  --nexus-secondary:        var(--nexus-slate-800);
  --nexus-accent:           var(--nexus-teal-500);
  --nexus-accent-hover:     var(--nexus-teal-600);
  --nexus-accent-text:      var(--nexus-teal-700);
  --nexus-accent-subtle:    var(--nexus-teal-100);
  --nexus-interactive:      var(--nexus-blue-500);   /* focus / links */

  --nexus-background:       var(--nexus-slate-25);
  --nexus-surface:          var(--nexus-slate-0);
  --nexus-surface-alt:      var(--nexus-slate-50);
  --nexus-surface-elevated: var(--nexus-slate-0);
  --nexus-border:           var(--nexus-slate-200);
  --nexus-border-subtle:    var(--nexus-slate-100);

  --nexus-text-primary:     var(--nexus-slate-900);
  --nexus-text-secondary:   var(--nexus-slate-600);
  --nexus-text-muted:       var(--nexus-slate-500);
  --nexus-text-on-primary:  #FFFFFF;

  --nexus-success:          #22C55E;
  --nexus-success-text:     #15803D;
  --nexus-success-subtle:   #ECFDF3;
  --nexus-warning:          #F59E0B;
  --nexus-warning-text:     #92400E;
  --nexus-warning-subtle:   #FEF6E7;
  --nexus-error:            #EF4444;
  --nexus-error-text:       #B91C1C;
  --nexus-error-subtle:     #FEF0F0;
  --nexus-info:             #38BDF8;
  --nexus-info-text:        #0369A1;
  --nexus-info-subtle:      #F0F9FF;

  /* ---- typography ----------------------------------------- */
  --nexus-font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nexus-font-heading: "Plus Jakarta Sans", "Inter", sans-serif;
  --nexus-font-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --nexus-fs-display: 40px;   --nexus-lh-display: 44px;
  --nexus-fs-h1: 26px;        --nexus-lh-h1: 32px;
  --nexus-fs-h2: 20px;        --nexus-lh-h2: 28px;
  --nexus-fs-h3: 16px;        --nexus-lh-h3: 24px;
  --nexus-fs-section: 11px;   --nexus-lh-section: 16px;   /* uppercase, 0.08em */
  --nexus-fs-body: 14px;      --nexus-lh-body: 21px;
  --nexus-fs-body-sm: 13px;   --nexus-lh-body-sm: 20px;
  --nexus-fs-label: 12.5px;   --nexus-lh-label: 16px;
  --nexus-fs-caption: 11.5px; --nexus-lh-caption: 16px;
  --nexus-fs-table-head: 11.5px;
  --nexus-fs-kpi: 30px;       --nexus-lh-kpi: 34px;

  --nexus-fw-regular: 400;
  --nexus-fw-medium: 500;
  --nexus-fw-semibold: 600;
  --nexus-fw-bold: 700;

  /* ---- spacing (4px base) --------------------------------- */
  --nexus-space-1: 4px;   --nexus-space-2: 8px;   --nexus-space-3: 12px;
  --nexus-space-4: 16px;  --nexus-space-5: 20px;  --nexus-space-6: 24px;
  --nexus-space-8: 32px;  --nexus-space-10: 40px; --nexus-space-12: 48px;
  --nexus-space-16: 64px;

  /* ---- radius / borders ----------------------------------- */
  --nexus-radius-xs: 2px;
  --nexus-radius-sm: 3px;
  --nexus-radius-md: 5px;
  --nexus-radius-lg: 8px;
  --nexus-radius-pill: 999px;
  --nexus-border-width: 1px;
  --nexus-rail-width: 2px;              /* signature active marker */

  /* ---- elevation ------------------------------------------ */
  --nexus-shadow-none: none;
  --nexus-shadow-sm: 0 1px 2px rgba(11, 31, 58, 0.06);
  --nexus-shadow-md: 0 4px 10px -2px rgba(11, 31, 58, 0.10);
  --nexus-shadow-lg: 0 16px 36px -8px rgba(11, 31, 58, 0.16);

  /* ---- states --------------------------------------------- */
  --nexus-focus-ring: 0 0 0 3px rgba(47, 107, 255, 0.20);
  --nexus-focus-border: var(--nexus-interactive);
  --nexus-hover-surface: var(--nexus-slate-50);
  --nexus-active-surface: var(--nexus-slate-100);
  --nexus-selected-surface: var(--nexus-slate-50);
  --nexus-disabled-fg: var(--nexus-slate-400);
  --nexus-disabled-bg: var(--nexus-slate-50);
  --nexus-opacity-disabled: 0.55;

  /* ---- transitions ---------------------------------------- */
  --nexus-transition-fast: 120ms cubic-bezier(0.2, 0, 0.2, 1);
  --nexus-transition-base: 180ms cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- density: Comfortable (default) --------------------- */
  --nexus-row-height: 40px;
  --nexus-control-height: 34px;
  --nexus-form-row-gap: 16px;
  --nexus-card-padding: 20px;
  --nexus-toolbar-height: 52px;
  --nexus-icon-size: 20px;
}

/* ---- density: Compact ------------------------------------- */
[data-nexus-density="compact"] {
  --nexus-row-height: 32px;
  --nexus-control-height: 28px;
  --nexus-form-row-gap: 10px;
  --nexus-card-padding: 14px;
  --nexus-toolbar-height: 44px;
  --nexus-icon-size: 16px;
}

/* ============================================================
   DARK MODE — re-derived, not inverted.
   Three deliberate departures:
   1. primary lightens to blue-400 for AA on dark surfaces
   2. selected state = deep desaturated navy, not a tinted white
   3. shadow is halved; surface-elevated does the lifting
   ============================================================ */
[data-nexus-theme="dark"] {
  --nexus-primary:          #5B8CFF;
  --nexus-primary-hover:    #7FA5FF;
  --nexus-primary-active:   #4A7CFF;
  --nexus-primary-subtle:   #12274A;
  --nexus-secondary:        #C2D0E0;
  --nexus-accent:           #1CCFC9;
  --nexus-accent-hover:     #7FE0DC;
  --nexus-accent-text:      #1CCFC9;
  --nexus-accent-subtle:    #0C2E2D;
  --nexus-interactive:      #5B8CFF;

  --nexus-background:       #061426;
  --nexus-surface:          #0B1F3A;
  --nexus-surface-alt:      #122A47;
  --nexus-surface-elevated: #122A47;
  --nexus-border:           #24425F;
  --nexus-border-subtle:    #16304C;

  --nexus-text-primary:     #E8EEF6;
  --nexus-text-secondary:   #9FB2C8;
  --nexus-text-muted:       #6B7F97;
  --nexus-text-on-primary:  #061426;

  --nexus-success:          #22C55E;  --nexus-success-text: #86EFAC;  --nexus-success-subtle: #0F2E1D;
  --nexus-warning:          #F59E0B;  --nexus-warning-text: #F59E0B;  --nexus-warning-subtle: #3A2A08;
  --nexus-error:            #F87171;  --nexus-error-text:   #F87171;  --nexus-error-subtle:   #3A1D1D;
  --nexus-info:             #38BDF8;  --nexus-info-text:    #38BDF8;  --nexus-info-subtle:    #0B2A3F;

  --nexus-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --nexus-shadow-md: 0 4px 10px -2px rgba(0, 0, 0, 0.40);
  --nexus-shadow-lg: 0 16px 36px -8px rgba(0, 0, 0, 0.55);
  --nexus-focus-ring: 0 0 0 3px rgba(91, 140, 255, 0.25);

  --nexus-hover-surface: #122A47;
  --nexus-active-surface: #1B3455;
  --nexus-selected-surface: #12274A;
  --nexus-disabled-fg: #6B7F97;
  --nexus-disabled-bg: #16304C;
}