/* ==========================================================================
   Genome XI Design Tokens
   Warm editorial aesthetic. DM Sans body, Space Mono labels.
   Muted semantic colors. Tri-state status system.
   ========================================================================== */

:root {
  /* ---------- Surfaces ---------- */
  --bg:          #f4f2ec;
  --surface:     #ffffff;
  --surface-2:   #eae6dc;

  /* ---------- Borders ---------- */
  --border:        #ddd7c8;
  --border-strong: #c4bdaa;
  --border-active: #8a8270;

  /* ---------- Text ---------- */
  --text:       #1c1a16;
  --text-dim:   #5c574e;
  --text-faint: #8a8270;
  --text-ghost: #b8b1a0;

  /* ---------- Semantic ---------- */
  --green:     #3d6b2e;
  --green-dim: rgba(61, 107, 46, 0.12);
  --red:       #8f3a35;
  --red-dim:   rgba(143, 58, 53, 0.12);
  --blue:      #3d5a7c;
  --blue-dim:  rgba(61, 90, 124, 0.08);
  --amber:     #8a6d2b;
  --amber-dim: rgba(138, 109, 43, 0.12);
  --neutral:   #b8b1a0;

  /* ---------- Interactive ---------- */
  --row-hover:  #ece8dc;
  --row-active: #e3dfd2;

  /* ---------- Font families ---------- */
  --font-sans: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* ---------- Spacing ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* ---------- Border radius ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* ---------- Transitions ---------- */
  --duration-fast:   80ms;
  --duration-normal: 150ms;

  /* ---------- Typography sizes ---------- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-2xl:  1.5rem;

  /* ---------- Layout ---------- */
  --sidebar-width: 220px;
  --max-width: 1200px;
  --section-sm: var(--space-10);
  --radius-pill: 999px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);

  /* ---------- Aliases for shared gem tokens (geneops-browse) ---------- */
  --font-display:        var(--font-sans);
  --color-surface:       var(--surface);
  --color-surface-alt:   var(--bg);
  --color-deepest:       var(--text);
  --color-deep:          var(--text-dim);
  --color-light:         var(--surface-2);
  --color-lightest:      var(--bg);
  --color-mid:           var(--border);
  --color-muted:         var(--text-faint);
  --color-primary:       var(--blue);
  --color-text-muted:    var(--text-faint);
  --color-border-light:  var(--border);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-normal: 0ms;
  }
}