/* ==========================================================================
   BioTrack Pro — Design Tokens
   The single source of truth for colour, type, space, motion and elevation.
   No other stylesheet may declare a raw colour, radius, shadow or duration.
   ========================================================================== */

:root {
  /* ---------- Brand ---------------------------------------------------- */
  --brand-50:  #eef6ff;
  --brand-100: #d9ebff;
  --brand-200: #bcdcff;
  --brand-300: #8ec6ff;
  --brand-400: #59a6ff;
  --brand-500: #2f83f7;
  --brand-600: #1a63e0;
  --brand-700: #164fb8;
  --brand-800: #174493;
  --brand-900: #183c74;

  --teal-50:  #eafaf6;
  --teal-100: #cdf2e9;
  --teal-300: #7cd9c4;
  --teal-500: #17a884;
  --teal-600: #0f8a6c;
  --teal-700: #0d6e58;

  /* ---------- Neutrals ------------------------------------------------- */
  --gray-0:   #ffffff;
  --gray-25:  #fcfcfd;
  --gray-50:  #f7f8fa;
  --gray-100: #eef0f4;
  --gray-200: #e2e5eb;
  --gray-300: #ccd1da;
  --gray-400: #9aa2b1;
  --gray-500: #6e7787;
  --gray-600: #525b6b;
  --gray-700: #3d4552;
  --gray-800: #272d38;
  --gray-900: #171b22;
  --gray-950: #0e1116;

  /* ---------- Semantic status ------------------------------------------ */
  --success-50:  #e9f9ef;
  --success-100: #cdf0da;
  --success-500: #16a34a;
  --success-600: #12873d;
  --success-700: #0f6b31;

  --warning-50:  #fff6e6;
  --warning-100: #ffe9c2;
  --warning-500: #d97706;
  --warning-600: #b45f05;
  --warning-700: #8f4b04;

  --danger-50:  #fdecec;
  --danger-100: #fbd5d5;
  --danger-500: #dc2626;
  --danger-600: #b91c1c;
  --danger-700: #991b1b;

  --info-50:  #e8f2fe;
  --info-100: #cfe4fd;
  --info-500: #2563eb;
  --info-600: #1d4ed8;

  --critical-50:  #fce9f0;
  --critical-500: #be123c;
  --critical-600: #9f1239;

  --purple-50:  #f3eefe;
  --purple-100: #e5dafd;
  --purple-500: #7c3aed;
  --purple-600: #6d28d9;

  /* ---------- Applied roles (light theme) ------------------------------ */
  --color-primary:            var(--brand-600);
  --color-primary-hover:      var(--brand-700);
  --color-primary-active:     var(--brand-800);
  --color-primary-soft:       var(--brand-50);
  --color-primary-soft-hover: var(--brand-100);
  --color-primary-border:     var(--brand-200);
  --color-on-primary:         #ffffff;

  --color-secondary:      var(--teal-600);
  --color-secondary-soft: var(--teal-50);
  --color-on-secondary:   #ffffff;

  --color-bg:            var(--gray-50);
  --color-bg-subtle:     var(--gray-100);
  --color-surface:       var(--gray-0);
  --color-surface-alt:   var(--gray-25);
  --color-surface-sunk:  var(--gray-50);
  --color-surface-hover: var(--gray-50);
  --color-overlay:       rgba(23, 27, 34, 0.55);

  --color-sidebar-bg:          var(--gray-900);
  --color-sidebar-fg:          #b9c0cd;
  --color-sidebar-fg-strong:   #ffffff;
  --color-sidebar-hover:       rgba(255, 255, 255, 0.07);
  --color-sidebar-active:      rgba(47, 131, 247, 0.16);
  --color-sidebar-active-fg:   #ffffff;
  --color-sidebar-border:      rgba(255, 255, 255, 0.08);
  --color-sidebar-section:     #6b7484;

  --color-border:        var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-border-subtle: var(--gray-100);

  --color-text:         var(--gray-800);
  --color-text-strong:  var(--gray-900);
  --color-text-muted:   var(--gray-500);
  --color-text-subtle:  var(--gray-400);
  --color-text-invert:  #ffffff;
  --color-link:         var(--brand-600);

  --color-success:      var(--success-600);
  --color-success-bg:   var(--success-50);
  --color-success-br:   var(--success-100);
  --color-warning:      var(--warning-600);
  --color-warning-bg:   var(--warning-50);
  --color-warning-br:   var(--warning-100);
  --color-danger:       var(--danger-600);
  --color-danger-bg:    var(--danger-50);
  --color-danger-br:    var(--danger-100);
  --color-info:         var(--info-600);
  --color-info-bg:      var(--info-50);
  --color-info-br:      var(--info-100);
  --color-critical:     var(--critical-600);
  --color-critical-bg:  var(--critical-50);
  --color-neutral-bg:   var(--gray-100);
  --color-neutral-fg:   var(--gray-600);
  --color-purple:       var(--purple-600);
  --color-purple-bg:    var(--purple-50);

  --color-focus-ring: rgba(47, 131, 247, 0.45);

  /* ---------- Chart series (colour-blind aware, ordered by distinctness) */
  --chart-1: #1a63e0;
  --chart-2: #17a884;
  --chart-3: #d97706;
  --chart-4: #7c3aed;
  --chart-5: #dc2626;
  --chart-6: #0891b2;
  --chart-7: #ca8a04;
  --chart-8: #db2777;
  --chart-grid: var(--color-border);
  --chart-axis: var(--color-text-subtle);

  /* ---------- Typography ----------------------------------------------- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Consolas", "Liberation Mono", monospace;

  --text-2xs: 0.6875rem; /* 11px — label chips, table meta */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.8125rem; /* 13px — table body, dense UI */
  --text-md:  0.875rem;  /* 14px — base UI */
  --text-base:0.9375rem; /* 15px — body copy */
  --text-lg:  1.0625rem; /* 17px */
  --text-xl:  1.25rem;   /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px — stat figures */

  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --tracking-tight: -0.011em;
  --tracking-wide:  0.04em;
  --tracking-caps:  0.06em;

  /* ---------- Spacing (4px base) --------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-7:  1.75rem;  /* 28 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */

  /* ---------- Radius ---------------------------------------------------- */
  --radius-xs:   3px;
  --radius-sm:   5px;
  --radius-md:   7px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-full: 999px;

  /* ---------- Elevation -------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.05);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.09), 0 4px 6px -2px rgba(16, 24, 40, 0.04);
  --shadow-xl: 0 20px 24px -4px rgba(16, 24, 40, 0.10), 0 8px 8px -4px rgba(16, 24, 40, 0.04);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-inset: inset 0 1px 2px rgba(16, 24, 40, 0.06);

  /* ---------- Motion ----------------------------------------------------- */
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    200ms;
  --duration-slow:    300ms;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
  --transition-colors: color var(--duration-fast) var(--ease-in-out),
                       background-color var(--duration-fast) var(--ease-in-out),
                       border-color var(--duration-fast) var(--ease-in-out);
  --transition-shadow: box-shadow var(--duration-fast) var(--ease-in-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);

  /* ---------- Layout metrics --------------------------------------------- */
  --sidebar-width:           248px;
  --sidebar-width-collapsed: 64px;
  --header-height:           60px;
  --content-max:             1600px;
  --page-gutter:             var(--space-6);
  --page-gutter-sm:          var(--space-4);

  /* ---------- Z-index ladder ---------------------------------------------- */
  --z-base:        0;
  --z-sticky:      100;
  --z-header:      200;
  --z-sidebar:     300;
  --z-dropdown:    400;
  --z-drawer:      500;
  --z-overlay:     600;
  --z-modal:       700;
  --z-toast:       800;
  --z-tooltip:     900;

  /* ---------- Breakpoints (documentation; media queries use literals) ----- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;

  color-scheme: light;
}

/* ==========================================================================
   Dark theme — only role tokens are redefined, never raw scales.
   ========================================================================== */

[data-theme="dark"] {
  --color-primary:            var(--brand-400);
  --color-primary-hover:      var(--brand-300);
  --color-primary-active:     var(--brand-200);
  --color-primary-soft:       rgba(47, 131, 247, 0.14);
  --color-primary-soft-hover: rgba(47, 131, 247, 0.22);
  --color-primary-border:     rgba(47, 131, 247, 0.35);
  --color-on-primary:         var(--gray-950);

  --color-secondary:      var(--teal-300);
  --color-secondary-soft: rgba(23, 168, 132, 0.14);
  --color-on-secondary:   var(--gray-950);

  --color-bg:            #0b0e13;
  --color-bg-subtle:     #10141b;
  --color-surface:       #161b24;
  --color-surface-alt:   #1b212c;
  --color-surface-sunk:  #11161e;
  --color-surface-hover: #1f2632;
  --color-overlay:       rgba(0, 0, 0, 0.68);

  --color-sidebar-bg:        #0b0e13;
  --color-sidebar-fg:        #8e97a6;
  --color-sidebar-fg-strong: #f2f4f7;
  --color-sidebar-hover:     rgba(255, 255, 255, 0.05);
  --color-sidebar-active:    rgba(89, 166, 255, 0.16);
  --color-sidebar-active-fg: #ffffff;
  --color-sidebar-border:    rgba(255, 255, 255, 0.07);
  --color-sidebar-section:   #5d6675;

  --color-border:        #262d3a;
  --color-border-strong: #333c4c;
  --color-border-subtle: #1d2430;

  --color-text:         #dde1e8;
  --color-text-strong:  #f5f7fa;
  --color-text-muted:   #98a1b0;
  --color-text-subtle:  #6d7684;
  --color-text-invert:  var(--gray-950);
  --color-link:         var(--brand-300);

  --color-success:      #4ade80;
  --color-success-bg:   rgba(22, 163, 74, 0.14);
  --color-success-br:   rgba(22, 163, 74, 0.30);
  --color-warning:      #fbbf24;
  --color-warning-bg:   rgba(217, 119, 6, 0.15);
  --color-warning-br:   rgba(217, 119, 6, 0.32);
  --color-danger:       #f87171;
  --color-danger-bg:    rgba(220, 38, 38, 0.15);
  --color-danger-br:    rgba(220, 38, 38, 0.32);
  --color-info:         #60a5fa;
  --color-info-bg:      rgba(37, 99, 235, 0.15);
  --color-info-br:      rgba(37, 99, 235, 0.32);
  --color-critical:     #fb7185;
  --color-critical-bg:  rgba(190, 18, 60, 0.18);
  --color-neutral-bg:   #232b37;
  --color-neutral-fg:   #a8b1bf;
  --color-purple:       #a78bfa;
  --color-purple-bg:    rgba(124, 58, 237, 0.16);

  --color-focus-ring: rgba(89, 166, 255, 0.5);

  --chart-1: #59a6ff;
  --chart-2: #34d3ac;
  --chart-3: #fbbf24;
  --chart-4: #a78bfa;
  --chart-5: #f87171;
  --chart-6: #22d3ee;
  --chart-7: #facc15;
  --chart-8: #f472b6;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 16px -4px rgba(0, 0, 0, 0.55), 0 4px 6px -2px rgba(0, 0, 0, 0.35);
  --shadow-xl: 0 20px 24px -4px rgba(0, 0, 0, 0.6), 0 8px 8px -4px rgba(0, 0, 0, 0.4);

  color-scheme: dark;
}

/* Compact density — reduces vertical rhythm for high-volume data screens. */
[data-density="compact"] {
  --space-3: 0.625rem;
  --space-4: 0.8125rem;
  --space-5: 1rem;
  --space-6: 1.125rem;
  --header-height: 52px;
}