:root {
  /* Primitive Color Tokens */
  --color-white: rgba(255, 255, 255, 1);
  --color-black: rgba(0, 0, 0, 1);
  --color-cream-50: rgba(252, 252, 249, 1);
  --color-cream-100: rgba(255, 255, 253, 1);
  --color-gray-200: rgba(245, 245, 245, 1);
  --color-gray-300: rgba(167, 169, 169, 1);
  --color-gray-400: rgba(119, 124, 124, 1);
  --color-slate-500: rgba(98, 108, 113, 1);
  --color-brown-600: rgba(94, 82, 64, 1);
  --color-charcoal-700: rgba(31, 33, 33, 1);
  --color-charcoal-800: rgba(38, 40, 40, 1);
  --color-slate-900: rgba(19, 52, 59, 1);
  --color-teal-300: rgba(50, 184, 198, 1);
  --color-teal-400: rgba(45, 166, 178, 1);
  --color-teal-500: rgba(33, 128, 141, 1);
  --color-teal-600: rgba(29, 116, 128, 1);
  --color-teal-700: rgba(26, 104, 115, 1);
  --color-teal-800: rgba(41, 150, 161, 1);
  --color-red-400: rgba(255, 84, 89, 1);
  --color-red-500: rgba(192, 21, 47, 1);
  --color-orange-400: rgba(230, 129, 97, 1);
  --color-orange-500: rgba(168, 75, 47, 1);

  /* RGB versions for opacity control */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  --color-slate-500-rgb: 98, 108, 113;
  --color-red-500-rgb: 192, 21, 47;
  --color-red-400-rgb: 255, 84, 89;
  --color-orange-500-rgb: 168, 75, 47;
  --color-orange-400-rgb: 230, 129, 97;

  /* Background color tokens (Light Mode) */
  --color-bg-1: rgba(59, 130, 246, 0.08); /* Light blue */
  --color-bg-2: rgba(245, 158, 11, 0.08); /* Light yellow */
  --color-bg-3: rgba(34, 197, 94, 0.08); /* Light green */
  --color-bg-4: rgba(239, 68, 68, 0.08); /* Light red */
  --color-bg-5: rgba(147, 51, 234, 0.08); /* Light purple */
  --color-bg-6: rgba(249, 115, 22, 0.08); /* Light orange */
  --color-bg-7: rgba(236, 72, 153, 0.08); /* Light pink */
  --color-bg-8: rgba(6, 182, 212, 0.08); /* Light cyan */

  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);
  --color-select-caret: rgba(var(--color-slate-900-rgb), 0.8);

  /* Common style patterns */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for opacity control */
  --color-success-rgb: 33, 128, 141;
  --color-error-rgb: 192, 21, 47;
  --color-warning-rgb: 168, 75, 47;
  --color-info-rgb: 98, 108, 113;

  /* Typography */
  /* Brand faces only. Source Sans 3 is a GLYPH FALLBACK, never a design choice — Atkinson lacks
     some scientific symbols. Josie retired the monospace brand-wide on 13 Aug ("we've got Atkinson
     Hyperlegible and then also Baskerville... we need yet another font type?"), so --font-family-mono
     deliberately no longer contains a monospace face. The token name is kept so every call site
     changes in one edit. DO NOT "restore" it. */
  --font-family-base: "Atkinson Hyperlegible", "Source Sans 3", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: "Atkinson Hyperlegible", "Source Sans 3", -apple-system,
    BlinkMacSystemFont, sans-serif;
  --font-family-display: "Libre Baskerville", Georgia, serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-2xl: 20px;
  --font-size-3xl: 24px;
  --font-size-4xl: 30px;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 550;
  --font-weight-bold: 600;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --letter-spacing-tight: -0.01em;

  /* Spacing */
  --space-0: 0;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-base: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.04),
    0 2px 4px -1px rgba(0, 0, 0, 0.02);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.04),
    0 4px 6px -2px rgba(0, 0, 0, 0.02);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.03);

  /* Animation */
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

  /* Layout */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
}

/* Dark mode colors */
@media (prefers-color-scheme: dark) {
  :root {
    /* RGB versions for opacity control (Dark Mode) */
    --color-gray-400-rgb: 119, 124, 124;
    --color-teal-300-rgb: 50, 184, 198;
    --color-gray-300-rgb: 167, 169, 169;
    --color-gray-200-rgb: 245, 245, 245;

    /* Background color tokens (Dark Mode) */
    --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
    --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
    --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
    --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
    --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
    --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
    --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
    --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
    
    /* Semantic Color Tokens (Dark Mode) */
    --color-background: var(--color-charcoal-700);
    --color-surface: var(--color-charcoal-800);
    --color-text: var(--color-gray-200);
    --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
    --color-primary: var(--color-teal-300);
    --color-primary-hover: var(--color-teal-400);
    --color-primary-active: var(--color-teal-800);
    --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
    --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
    --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
    --color-border: rgba(var(--color-gray-400-rgb), 0.3);
    --color-error: var(--color-red-400);
    --color-success: var(--color-teal-300);
    --color-warning: var(--color-orange-400);
    --color-info: var(--color-gray-300);
    --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
    --color-btn-primary-text: var(--color-slate-900);
    --color-card-border: rgba(var(--color-gray-400-rgb), 0.2);
    --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
    --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    --button-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
    --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

    /* Common style patterns - updated for dark mode */
    --focus-ring: 0 0 0 3px var(--color-focus-ring);
    --focus-outline: 2px solid var(--color-primary);
    --status-bg-opacity: 0.15;
    --status-border-opacity: 0.25;
    --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

    /* RGB versions for dark mode */
    --color-success-rgb: var(--color-teal-300-rgb);
    --color-error-rgb: var(--color-red-400-rgb);
    --color-warning-rgb: var(--color-orange-400-rgb);
    --color-info-rgb: var(--color-gray-300-rgb);
  }
}

/* Data attribute for manual theme switching */
[data-color-scheme="dark"] {
  /* RGB versions for opacity control (dark mode) */
  --color-gray-400-rgb: 119, 124, 124;
  --color-teal-300-rgb: 50, 184, 198;
  --color-gray-300-rgb: 167, 169, 169;
  --color-gray-200-rgb: 245, 245, 245;

  /* Colorful background palette - Dark Mode */
  --color-bg-1: rgba(29, 78, 216, 0.15); /* Dark blue */
  --color-bg-2: rgba(180, 83, 9, 0.15); /* Dark yellow */
  --color-bg-3: rgba(21, 128, 61, 0.15); /* Dark green */
  --color-bg-4: rgba(185, 28, 28, 0.15); /* Dark red */
  --color-bg-5: rgba(107, 33, 168, 0.15); /* Dark purple */
  --color-bg-6: rgba(194, 65, 12, 0.15); /* Dark orange */
  --color-bg-7: rgba(190, 24, 93, 0.15); /* Dark pink */
  --color-bg-8: rgba(8, 145, 178, 0.15); /* Dark cyan */
  
  /* Semantic Color Tokens (Dark Mode) */
  --color-background: var(--color-charcoal-700);
  --color-surface: var(--color-charcoal-800);
  --color-text: var(--color-gray-200);
  --color-text-secondary: rgba(var(--color-gray-300-rgb), 0.7);
  --color-primary: var(--color-teal-300);
  --color-primary-hover: var(--color-teal-400);
  --color-primary-active: var(--color-teal-800);
  --color-secondary: rgba(var(--color-gray-400-rgb), 0.15);
  --color-secondary-hover: rgba(var(--color-gray-400-rgb), 0.25);
  --color-secondary-active: rgba(var(--color-gray-400-rgb), 0.3);
  --color-border: rgba(var(--color-gray-400-rgb), 0.3);
  --color-error: var(--color-red-400);
  --color-success: var(--color-teal-300);
  --color-warning: var(--color-orange-400);
  --color-info: var(--color-gray-300);
  --color-focus-ring: rgba(var(--color-teal-300-rgb), 0.4);
  --color-btn-primary-text: var(--color-slate-900);
  --color-card-border: rgba(var(--color-gray-400-rgb), 0.15);
  --color-card-border-inner: rgba(var(--color-gray-400-rgb), 0.15);
  --shadow-inset-sm: inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  --color-border-secondary: rgba(var(--color-gray-400-rgb), 0.2);
  --color-select-caret: rgba(var(--color-gray-200-rgb), 0.8);

  /* Common style patterns - updated for dark mode */
  --focus-ring: 0 0 0 3px var(--color-focus-ring);
  --focus-outline: 2px solid var(--color-primary);
  --status-bg-opacity: 0.15;
  --status-border-opacity: 0.25;
  --select-caret-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23134252' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  --select-caret-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f5f5f5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

  /* RGB versions for dark mode */
  --color-success-rgb: var(--color-teal-300-rgb);
  --color-error-rgb: var(--color-red-400-rgb);
  --color-warning-rgb: var(--color-orange-400-rgb);
  --color-info-rgb: var(--color-gray-300-rgb);
}

[data-color-scheme="light"] {
  /* RGB versions for opacity control (light mode) */
  --color-brown-600-rgb: 94, 82, 64;
  --color-teal-500-rgb: 33, 128, 141;
  --color-slate-900-rgb: 19, 52, 59;
  
  /* Semantic Color Tokens (Light Mode) */
  --color-background: var(--color-cream-50);
  --color-surface: var(--color-cream-100);
  --color-text: var(--color-slate-900);
  --color-text-secondary: var(--color-slate-500);
  --color-primary: var(--color-teal-500);
  --color-primary-hover: var(--color-teal-600);
  --color-primary-active: var(--color-teal-700);
  --color-secondary: rgba(var(--color-brown-600-rgb), 0.12);
  --color-secondary-hover: rgba(var(--color-brown-600-rgb), 0.2);
  --color-secondary-active: rgba(var(--color-brown-600-rgb), 0.25);
  --color-border: rgba(var(--color-brown-600-rgb), 0.2);
  --color-btn-primary-text: var(--color-cream-50);
  --color-card-border: rgba(var(--color-brown-600-rgb), 0.12);
  --color-card-border-inner: rgba(var(--color-brown-600-rgb), 0.12);
  --color-error: var(--color-red-500);
  --color-success: var(--color-teal-500);
  --color-warning: var(--color-orange-500);
  --color-info: var(--color-slate-500);
  --color-focus-ring: rgba(var(--color-teal-500-rgb), 0.4);

  /* RGB versions for light mode */
  --color-success-rgb: var(--color-teal-500-rgb);
  --color-error-rgb: var(--color-red-500-rgb);
  --color-warning-rgb: var(--color-orange-500-rgb);
  --color-info-rgb: var(--color-slate-500-rgb);
}

/* Base styles */
html {
  font-size: var(--font-size-base);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-4xl);
}
h2 {
  font-size: var(--font-size-3xl);
}
h3 {
  font-size: var(--font-size-2xl);
}
h4 {
  font-size: var(--font-size-xl);
}
h5 {
  font-size: var(--font-size-lg);
}
h6 {
  font-size: var(--font-size-md);
}

p {
  margin: 0 0 var(--space-16) 0;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
  color: var(--color-primary-hover);
}

code,
pre {
  font-family: var(--font-family-mono);
  font-size: calc(var(--font-size-base) * 0.95);
  background-color: var(--color-secondary);
  border-radius: var(--radius-sm);
}

code {
  padding: var(--space-1) var(--space-4);
}

pre {
  padding: var(--space-16);
  margin: var(--space-16) 0;
  overflow: auto;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-standard);
  border: none;
  text-decoration: none;
  position: relative;
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-btn-primary-text);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
}

.btn--primary:active {
  background: var(--color-primary-active);
}

.btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text);
}

.btn--secondary:hover {
  background: var(--color-secondary-hover);
}

.btn--secondary:active {
  background: var(--color-secondary-active);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

.btn--outline:hover {
  background: var(--color-secondary);
}

.btn--sm {
  padding: var(--space-4) var(--space-12);
  font-size: var(--font-size-sm);
  border-radius: var(--radius-sm);
}

.btn--lg {
  padding: var(--space-10) var(--space-20);
  font-size: var(--font-size-lg);
  border-radius: var(--radius-md);
}

.btn--full-width {
  width: 100%;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form elements */
.form-control {
  display: block;
  width: 100%;
  padding: var(--space-8) var(--space-12);
  font-size: var(--font-size-md);
  line-height: 1.5;
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  transition: border-color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard);
}

textarea.form-control {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

select.form-control {
  padding: var(--space-8) var(--space-12);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: var(--select-caret-light);
  background-repeat: no-repeat;
  background-position: right var(--space-12) center;
  background-size: 16px;
  padding-right: var(--space-32);
}

/* Add a dark mode specific caret */
@media (prefers-color-scheme: dark) {
  select.form-control {
    background-image: var(--select-caret-dark);
  }
}

/* Also handle data-color-scheme */
[data-color-scheme="dark"] select.form-control {
  background-image: var(--select-caret-dark);
}

[data-color-scheme="light"] select.form-control {
  background-image: var(--select-caret-light);
}

.form-control:focus {
  border-color: var(--color-primary);
  outline: var(--focus-outline);
}

.form-label {
  display: block;
  margin-bottom: var(--space-8);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.form-group {
  margin-bottom: var(--space-16);
}

/* Card component */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-card-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.card:hover {
  box-shadow: var(--shadow-md);
}

.card__body {
  padding: var(--space-16);
}

.card__header,
.card__footer {
  padding: var(--space-16);
  border-bottom: 1px solid var(--color-card-border-inner);
}

/* Status indicators - simplified with CSS variables */
.status {
  display: inline-flex;
  align-items: center;
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
}

.status--success {
  background-color: rgba(
    var(--color-success-rgb, 33, 128, 141),
    var(--status-bg-opacity)
  );
  color: var(--color-success);
  border: 1px solid
    rgba(var(--color-success-rgb, 33, 128, 141), var(--status-border-opacity));
}

.status--error {
  background-color: rgba(
    var(--color-error-rgb, 192, 21, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-error);
  border: 1px solid
    rgba(var(--color-error-rgb, 192, 21, 47), var(--status-border-opacity));
}

.status--warning {
  background-color: rgba(
    var(--color-warning-rgb, 168, 75, 47),
    var(--status-bg-opacity)
  );
  color: var(--color-warning);
  border: 1px solid
    rgba(var(--color-warning-rgb, 168, 75, 47), var(--status-border-opacity));
}

.status--info {
  background-color: rgba(
    var(--color-info-rgb, 98, 108, 113),
    var(--status-bg-opacity)
  );
  color: var(--color-info);
  border: 1px solid
    rgba(var(--color-info-rgb, 98, 108, 113), var(--status-border-opacity));
}

/* Container layout */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-16);
  padding-left: var(--space-16);
}

@media (min-width: 640px) {
  .container {
    max-width: var(--container-sm);
  }
}
@media (min-width: 768px) {
  .container {
    max-width: var(--container-md);
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: var(--container-lg);
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: var(--container-xl);
  }
}

/* Utility classes */
.flex {
  display: flex;
}
.flex-col {
  flex-direction: column;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-4 {
  gap: var(--space-4);
}
.gap-8 {
  gap: var(--space-8);
}
.gap-16 {
  gap: var(--space-16);
}

.m-0 {
  margin: 0;
}
.mt-8 {
  margin-top: var(--space-8);
}
.mb-8 {
  margin-bottom: var(--space-8);
}
.mx-8 {
  margin-left: var(--space-8);
  margin-right: var(--space-8);
}
.my-8 {
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-0 {
  padding: 0;
}
.py-8 {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}
.px-8 {
  padding-left: var(--space-8);
  padding-right: var(--space-8);
}
.py-16 {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.px-16 {
  padding-left: var(--space-16);
  padding-right: var(--space-16);
}

.block {
  display: block;
}
.hidden {
  display: none;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 2px;
}

/* Dark mode specifics */
[data-color-scheme="dark"] .btn--outline {
  border: 1px solid var(--color-border-secondary);
}

/* WAS: FKGroteskNeue loaded from https://r2cdn.perplexity.ai — a font on a third party's CDN,
   and a competitor's brand face at that. Same class of dependency as the six dead S3 images in
   the Ageing Fatigue deck: alive today, gone whenever they choose. Now self-hosted CortexBio
   brand faces, matching the declarations in the main site's index.html exactly. */
@font-face{font-family:"Atkinson Hyperlegible";src:url("assets/fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Atkinson Hyperlegible";src:url("assets/fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Libre Baskerville";src:url("assets/fonts/LibreBaskerville-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Libre Baskerville";src:url("assets/fonts/LibreBaskerville-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

/* END PERPLEXITY DESIGN SYSTEM */
/* CortexBio Metabolic Synergy Tool Styles */

/* Override root colors for scientific theme */
:root {
  --color-primary: #1FB8CD;
  --color-primary-hover: #17a3b5;
  --color-primary-active: #138496;
  --color-secondary: #5D878F;
  --color-accent: #B4413C;
  --color-success: var(--color-primary);
  --color-warning: #D2BA4C;
  --color-error: #DB4545;
  
  /* Scientific color palette */
  --color-inherited: #1FB8CD;
  --color-aging: #B4413C;
  --color-pathway: #D2BA4C;
  --color-protein: #5D878F;
  --color-drug: #964325;
  
  /* Network colors */
  --color-node-inherited: var(--color-inherited);
  --color-node-aging: var(--color-aging);
  --color-node-pathway: var(--color-pathway);
  --color-node-protein: var(--color-protein);
  --color-node-drug: var(--color-drug);
}

/* Base layout */
body {
  background: var(--color-background);
  font-family: var(--font-family-base);
  line-height: var(--line-height-normal);
}

/* Header */
.header {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background) 100%);
  border-bottom: 2px solid var(--color-primary);
  padding: var(--space-24) 0;
  box-shadow: var(--shadow-md);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.branding .main-title {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.branding .subtitle {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin: var(--space-8) 0 0 0;
  font-weight: var(--font-weight-normal);
}

.data-sources-status {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.status-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-16);
  background: rgba(var(--color-success), 0.1);
  border: 1px solid rgba(var(--color-success), 0.3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  color: var(--color-success);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  animation: pulse 2s infinite;
}

.status-dot.active {
  box-shadow: 0 0 8px var(--color-success);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Navigation */
.main-nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0;
}

.nav-tabs {
  display: flex;
  gap: 0;
}

.nav-tab {
  background: transparent;
  border: none;
  padding: var(--space-16) var(--space-24);
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  border-bottom: 3px solid transparent;
}

.nav-tab:hover {
  background: rgba(var(--color-primary), 0.1);
  color: var(--color-text);
}

.nav-tab.active {
  background: rgba(var(--color-primary), 0.15);
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Main content */
.main-content {
  padding: var(--space-32) 0;
  min-height: calc(100vh - 200px);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

/* Landing page */
.landing-hero {
  text-align: center;
  margin-bottom: var(--space-32);
}

.hero-content h2 {
  font-size: var(--font-size-3xl);
  color: var(--color-text);
  margin-bottom: var(--space-16);
}

.hero-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  max-width: 800px;
  margin: 0 auto var(--space-32) auto;
  line-height: 1.6;
}

.key-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-24);
  margin: var(--space-32) 0;
}

.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  text-align: center;
  transition: all var(--duration-normal) var(--ease-standard);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.feature-icon {
  font-size: 3rem;
  margin-bottom: var(--space-16);
}

.feature-card h3 {
  color: var(--color-primary);
  margin-bottom: var(--space-12);
}

.feature-card p {
  color: var(--color-text-secondary);
  margin: 0;
}

/* Sample results */
.sample-results {
  margin: var(--space-32) 0;
}

.sample-results h3 {
  color: var(--color-text);
  margin-bottom: var(--space-24);
  text-align: center;
}

.discovery-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--space-20);
}

.discovery-card {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  transition: all var(--duration-normal) var(--ease-standard);
}

.discovery-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.discovery-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.disease-tag {
  padding: var(--space-6) var(--space-12);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.disease-tag.inherited {
  background: rgba(var(--color-inherited), 0.2);
  color: var(--color-inherited);
  border: 1px solid rgba(var(--color-inherited), 0.4);
}

.disease-tag.aging {
  background: rgba(var(--color-aging), 0.2);
  color: var(--color-aging);
  border: 1px solid rgba(var(--color-aging), 0.4);
}

.connection-arrow {
  font-size: var(--font-size-lg);
  color: var(--color-primary);
  font-weight: bold;
}

.discovery-content p {
  margin: var(--space-8) 0;
  font-size: var(--font-size-sm);
}

.score {
  font-weight: var(--font-weight-bold);
  padding: var(--space-2) var(--space-6);
  border-radius: var(--radius-sm);
}

.score.high {
  background: rgba(var(--color-success), 0.2);
  color: var(--color-success);
}

/* Database status */
.database-status {
  margin: var(--space-32) 0;
}

.database-status h3 {
  color: var(--color-text);
  margin-bottom: var(--space-20);
  text-align: center;
}

.database-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-16);
}

.database-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
  padding: var(--space-12) var(--space-16);
}

.db-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.db-status.active {
  color: var(--color-success);
  font-size: var(--font-size-sm);
}

.db-updated {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

/* Disease Explorer */
.explorer-interface h2 {
  color: var(--color-text);
  margin-bottom: var(--space-16);
}

.explorer-interface p {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-32);
}

.disease-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-32);
  margin-bottom: var(--space-32);
}

.selector-column h3 {
  color: var(--color-primary);
  margin-bottom: var(--space-16);
}

.disease-info {
  margin-top: var(--space-16);
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
  min-height: 120px;
}

.analysis-controls {
  display: flex;
  justify-content: center;
  gap: var(--space-16);
  margin-bottom: var(--space-32);
}

.analysis-results {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
}

.results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-20);
  padding-bottom: var(--space-16);
  border-bottom: 1px solid var(--color-border);
}

.results-header h3 {
  color: var(--color-primary);
  margin: 0;
}

.export-options {
  display: flex;
  gap: var(--space-8);
}

/* Network visualization */
.network-container {
  height: 100%;
}

.network-controls {
  display: flex;
  gap: var(--space-20);
  align-items: center;
  margin-bottom: var(--space-24);
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
}

.control-group {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.control-group label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.control-group select {
  min-width: 120px;
}

.network-visualization {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  height: 600px;
  overflow: hidden;
}

.network-legend {
  position: absolute;
  top: var(--space-16);
  right: var(--space-16);
  background: rgba(var(--color-background), 0.9);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-base);
  padding: var(--space-12);
  z-index: 10;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  margin: var(--space-4) 0;
  font-size: var(--font-size-sm);
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-color.inherited { background: var(--color-inherited); }
.legend-color.aging { background: var(--color-aging); }
.legend-color.pathway { background: var(--color-pathway); }
.legend-color.protein { background: var(--color-protein); }
.legend-color.drug { background: var(--color-drug); }

#networkSvg {
  width: 100%;
  height: 100%;
}

.node-details {
  margin-top: var(--space-20);
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
}

/* Pathway Analysis */
.pathway-filters {
  display: flex;
  gap: var(--space-20);
  margin-bottom: var(--space-24);
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
}

.filter-group {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.filter-group label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.pathway-table-container {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.pathway-table {
  width: 100%;
  border-collapse: collapse;
}

.pathway-table th {
  background: var(--color-background);
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-12) var(--space-16);
  text-align: left;
  border-bottom: 2px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.pathway-table td {
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.pathway-table tbody tr:hover {
  background: rgba(var(--color-primary), 0.05);
}

/* Drug Cards */
.drug-filters {
  display: flex;
  gap: var(--space-20);
  margin-bottom: var(--space-24);
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
}

.drug-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--space-20);
}

.drug-card {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-20);
  transition: all var(--duration-normal) var(--ease-standard);
}

.drug-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.drug-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-16);
}

.drug-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  margin: 0;
}

.evidence-score {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-sm);
}

.evidence-score.high {
  background: rgba(var(--color-success), 0.2);
  color: var(--color-success);
}

.drug-details {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.drug-detail {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
}

.drug-detail .label {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.drug-detail .value {
  color: var(--color-text);
}

/* Knowledge Graph */
.knowledge-graph h2 {
  color: var(--color-text);
  margin-bottom: var(--space-16);
}

.graph-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-24);
  padding: var(--space-16);
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-base);
  flex-wrap: wrap;
  gap: var(--space-16);
}

.search-controls {
  display: flex;
  gap: var(--space-8);
  flex: 1;
  min-width: 300px;
}

.search-controls input {
  flex: 1;
}

.expansion-controls {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.expansion-controls label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.graph-container {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-20);
  height: 600px;
}

.graph-sidebar {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  padding: var(--space-16);
  overflow-y: auto;
}

.graph-sidebar h4 {
  color: var(--color-primary);
  margin-bottom: var(--space-12);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-8);
}

.graph-main {
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

#knowledgeGraphSvg {
  width: 100%;
  height: 100%;
}

/* Modal styles */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden {
  display: none;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-lg);
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-20);
  border-bottom: 1px solid var(--color-border);
}

.modal-header h2 {
  margin: 0;
  color: var(--color-primary);
}

.modal-close {
  background: none;
  border: none;
  font-size: var(--font-size-2xl);
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: var(--space-4);
  border-radius: var(--radius-base);
  transition: all var(--duration-fast) var(--ease-standard);
}

.modal-close:hover {
  background: rgba(var(--color-error), 0.1);
  color: var(--color-error);
}

.modal-body {
  padding: var(--space-20);
}

/* Loading spinner */
.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(var(--color-primary), 0.2);
  border-left: 4px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto var(--space-16) auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.modal-body h3 {
  text-align: center;
  color: var(--color-text);
  margin-bottom: var(--space-12);
}

#loadingMessage {
  text-align: center;
  color: var(--color-text-secondary);
  margin: 0;
}

/* Responsive design */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: var(--space-16);
    text-align: center;
  }
  
  .nav-tabs {
    flex-wrap: wrap;
  }
  
  .nav-tab {
    flex: 1;
    min-width: 120px;
  }
  
  .disease-selector {
    grid-template-columns: 1fr;
  }
  
  .key-features {
    grid-template-columns: 1fr;
  }
  
  .discovery-cards {
    grid-template-columns: 1fr;
  }
  
  .database-grid {
    grid-template-columns: 1fr;
  }
  
  .network-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .control-group {
    justify-content: space-between;
  }
  
  .pathway-filters,
  .drug-filters {
    flex-direction: column;
  }
  
  .graph-container {
    grid-template-columns: 1fr;
    height: auto;
  }
  
  .graph-sidebar {
    order: 2;
    height: 200px;
  }
  
  .graph-main {
    order: 1;
    height: 400px;
  }
  
  .graph-controls {
    flex-direction: column;
    align-items: stretch;
  }
  
  .search-controls {
    min-width: auto;
  }
  
  .expansion-controls {
    justify-content: space-between;
  }
}

/* Pathway table responsive */
@media (max-width: 768px) {
  .pathway-table-container {
    overflow-x: auto;
  }
  
  .pathway-table {
    min-width: 800px;
  }
}

/* Drug cards responsive */
@media (max-width: 768px) {
  .drug-cards {
    grid-template-columns: 1fr;
  }
}
/* ============================================================================
   CORTEXBIO OCEAN THEME — single committed dark theme.

   Appended as ONE override block rather than editing 252 scattered colour uses:
   the inherited stylesheet is already tokenised, so redefining the tokens carries
   the whole tool, and there is exactly one place to look when something is wrong.

   Values are lifted VERBATIM from cortexbio-build/index.html so this file cannot
   drift from the site it will sit inside. If the site's palette changes, copy the
   block again — do not hand-tune values here.

   Applied to :root AND to both [data-color-scheme] selectors deliberately. The
   inherited CSS carries light/dark switching blocks (prefers-color-scheme plus a
   data attribute); leaving those live would let the tool render a different theme
   depending on the visitor's OS setting, inside a site that is always dark. Pinning
   all three makes divergence impossible rather than unlikely.
   ============================================================================ */
:root,
[data-color-scheme="dark"],
[data-color-scheme="light"] {
  /* Brand palette — the authority is Brand/Color-Hex-RGB-Pantone-Usage.csv */
  --brand-purple:#6D2077; --brand-navy:#003B5C; --brand-green:#6CC24A;
  --brand-cyan:#00A1E2;   --brand-magenta:#DF1995;

  /* Ground and surfaces */
  --color-background:#013a5b;
  --color-surface:rgba(255,255,255,0.038);
  --color-surface-solid:#06344E;
  --color-card-border:rgba(255,255,255,0.14);
  --color-card-border-inner:rgba(255,255,255,0.08);
  --color-border:rgba(255,255,255,0.14);
  --color-border-secondary:rgba(255,255,255,0.08);

  /* Ink */
  --color-text:#F3F9FC;
  --color-text-secondary:#B4CEDC;

  /* Interactive */
  --color-primary:#3FBCEE;
  --color-primary-hover:#5AC7F3;
  --color-primary-active:#00A1E2;
  --color-btn-primary-text:#012B44;
  --color-secondary:rgba(255,255,255,0.06);
  --color-secondary-hover:rgba(255,255,255,0.10);
  --color-secondary-active:rgba(255,255,255,0.14);
  --color-focus-ring:#3FBCEE;
  --color-select-caret:#B4CEDC;

  /* Status */
  --color-success:#8AD86A;
  --color-warning:#F0C419;
  --color-error:#FF6B8A;
  --color-info:#3FBCEE;

  /* SCIENTIFIC ROLES. The inherited palette was an arbitrary five (teal/rust/mustard/
     slate/brown) with no relation to the brand and several unreadable on navy. Brand
     has fewer hues than this tool has roles, so — exactly as agreed for the Circadian
     Visualizer — COLOUR CARRIES ROLE and every one is checked against the navy ground:
       inherited disease  magenta   the rare-disease side of the thesis
       ageing condition   cyan      the ageing side
       shared pathway     violet    where the two meet
       protein            pale blue supporting structure, deliberately quietest
       drug candidate     green     the actionable output — green means "live" sitewide
     #6D2077 brand purple is unreadable on our navy, so pathways use the site's own
     lifted violet #B98FD0 — the token index.html already uses for this exact problem.
     This is the only brand exception, and it is the same one the circadian tool makes. */
  --color-inherited:#DF1995;
  --color-aging:#3FBCEE;
  --color-pathway:#B98FD0;
  --color-protein:#B9D9EB;
  --color-drug:#8AD86A;

  --color-node-inherited:var(--color-inherited);
  --color-node-aging:var(--color-aging);
  --color-node-pathway:var(--color-pathway);
  --color-node-protein:var(--color-protein);
  --color-node-drug:var(--color-drug);

  --color-accent:var(--brand-magenta);
  --color-white:#FFFFFF; --color-black:#000000;
}

/* The ground gradient is the site's, so the tool reads as part of the same page
   rather than a panel pasted onto it. */
body{
  background:#013a5b;
  background-image:
    radial-gradient(120% 90% at 84% -8%, rgba(0,161,226,0.20), transparent 52%),
    linear-gradient(162deg,#064B72 0%, #012B44 60%, #011F32 100%);
  background-attachment:fixed;
  color:var(--color-text);
}

/* Headings take the brand serif; body stays Atkinson. Matches the site exactly. */
h1,h2,h3,h4,.header h1{ font-family:"Libre Baskerville", Georgia, serif; }

/* The two link treatments were tuned against the old light ground — retune for navy.
   Measured on the dark ground, not judged by eye. */
a.kegg-id.db-link{ background:rgba(63,203,238,0.14); color:#9FE4F7;
  border:1px solid rgba(63,203,238,0.42); }
a.kegg-id.db-link:hover, a.kegg-id.db-link:focus-visible{
  background:rgba(63,203,238,0.24); color:#CFF2FC; }
.tag{ color:#CFF2FC !important; background:rgba(63,203,238,0.14);
  border:1px solid rgba(63,203,238,0.34); }

/* ---------------------------------------------------------------------------
   Role tags.

   TWO faults fixed here, one of them latent since long before the theme:

   1. `rgba(var(--color-inherited), 0.2)` wraps a HEX value in rgba(), which is
      invalid CSS — the declaration was dropped and the tint never rendered, in
      either theme. It looked deliberate because the text colour still applied.
      Using color-mix() means the role colour stays a single hex token with no
      parallel "--x-rgb" triplet to fall out of step with it.

   2. Brand magenta at full strength on navy measures 2.4:1 — legible as a shape,
      not as words. So the ROLE is carried by the tint and the border, and the
      TEXT is a lightened tint of the same hue. The colour still identifies the
      role; it is simply no longer doing a job it cannot do on a dark ground.
   --------------------------------------------------------------------------- */
:root{
  --ink-inherited:#FFA6D5;   /* lightened magenta */
  --ink-aging:#9FE4F7;       /* lightened cyan    */
  --ink-pathway:#DCC4EC;     /* lightened violet  */
  --ink-drug:#B6EDA0;        /* lightened green   */
}
.disease-tag{ border-radius:999px; }
.disease-tag.inherited{
  background:color-mix(in srgb, var(--color-inherited) 20%, transparent);
  border:1px solid color-mix(in srgb, var(--color-inherited) 55%, transparent);
  color:var(--ink-inherited);
}
.disease-tag.aging{
  background:color-mix(in srgb, var(--color-aging) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--color-aging) 55%, transparent);
  color:var(--ink-aging);
}

/* ---------------------------------------------------------------------------
   Status indicator — "live-status-paused" (Josie's wording, 17 Aug 2026).

   The dot keeps pulsing, so the tool still reads as running rather than broken,
   but it is NOT green. Green means "live / now" everywhere in this brand — it is
   what the circadian tool uses for the current hour — so a green pulse beside the
   word "paused" would contradict itself at a glance, and the glance is what most
   readers get. Amber is the honest register: working, not connected.
   --------------------------------------------------------------------------- */
.status-indicator{ display:inline-flex; align-items:center; gap:8px; }

.status-dot.paused{
  background:#F0C419;
  box-shadow:0 0 8px rgba(240,196,25,0.55);
  animation:paused-pulse 2.4s ease-in-out infinite;
}
@keyframes paused-pulse{
  0%,100%{ opacity:1;   transform:scale(1); }
  50%    { opacity:0.45; transform:scale(0.86); }
}
/* A pulsing dot is decoration, not information — it must not be the only thing
   carrying the message, and it must not move for anyone who has asked motion to stop. */
@media (prefers-reduced-motion: reduce){
  .status-dot.paused{ animation:none; opacity:0.9; }
}

.status-label{
  font-size:12px; letter-spacing:0.06em; color:#F3D77A;
}

/* Curated-dataset panel. The names are now links to the sources themselves. */
.db-note{ color:var(--color-text-secondary); font-size:13px; margin:4px 0 14px; max-width:62ch; }
.database-item{ display:flex; align-items:center; }
a.db-name.db-link{ color:#9FE4F7; font-weight:600; }


/* ===== DEMONSTRATION tag =====
   The sticky pink banner that used to sit above the header was removed on
   Josie's instruction (22 Aug 2026): the pill beside the title and the green
   back-link in the header already carry both of its jobs. The same wording is
   STILL the first line of the CSV and JSON exports, which travel off the page
   and need the context the page itself provides.
   The pill was display:inline-block with the heading's line-height, so the
   uppercase caps - which have no descenders - sat above the optical centre.
   inline-flex + line-height:1 makes the pill exactly as tall as its padding,
   and the padding is split to centre the CAPS, not the line box: the ink sits
   flush with the top of the content box and 2px clear of its bottom, so top
   padding is exactly 2px more than bottom. Measured off the rendered pixels,
   not assumed. */
.demo-tag{display:inline-flex;align-items:center;vertical-align:middle;margin-left:10px;
  padding:5px 10px 3px;border-radius:999px;line-height:1;
  background:#DF1995;color:#fff;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}

.back-link{display:inline-block;font-size:18px;font-weight:700;color:#8AD86A;text-decoration:none;margin-bottom:10px;letter-spacing:.01em}
.back-link:hover{text-decoration:underline}

/* Says what the reader is looking at before they have chosen anything - the tab
   used to open on an empty canvas with no explanation. */
.network-caption{margin:-4px 0 14px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,0.72);max-width:70ch;}