/* src/styles/colors.css — unified theme tokens */
/* Every color in the app resolves to a variable defined here. */
/* data-theme: "dark" (default) | "light"  — controls UI chrome */
/* data-palette: "deoxy" | "midnight" | … — controls residue colors */

:root,
[data-theme="dark"] {

  /* Form control min height (single-line fields); mirrors app/globals.css */
  --control-height: 36px;

  /* ── Surface ────────────────────────────────────────────── */
  --surface-0:   hsl(0, 0%, 8%);
  --surface-50:  hsl(0, 0%, 9%);
  --surface-100: hsl(0, 0%, 11%);
  --surface-150: hsl(0, 0%, 12%);
  --surface-200: hsl(0, 0%, 13%);
  --surface-250: hsl(0, 0%, 15%);
  --surface-300: hsl(0, 0%, 16%);
  --surface-350: hsl(0, 0%, 20%);
  --surface-400: hsl(0, 0%, 24%);
  --surface-450: hsl(0, 0%, 28%);
  --surface-500: hsl(0, 0%, 32%);
  /* Semantic surface aliases */
  /* Something */
  --background-main:     var(--surface-150);
  --background-editor:   var(--surface-50);
  --background-primary:  var(--surface-50);
  --background-hover:    var(--surface-300);
  --background-active:   var(--surface-400);
  --background-input:    var(--surface-250);
  --background-disabled: var(--surface-350);

  /* ── Text ───────────────────────────────────────────────── */
  --text-main:        hsl(0, 0%, 100%);
  --text-primary:     hsl(0, 0%, 100%);
  --text-secondary:   hsl(0, 0%, 87%);
  --text-tertiary:    #A0A1A3;
  --text-muted:       #888888;
  --text-faint:       #5F6062;
  --text-placeholder:  hsl(0, 0%, 53%);
  --text-placeholder-alt: #6b6b6b;
  --text-hover:       hsl(0, 0%, 100%);
  --text-disabled:    #666666;
  --text-success:     hsl(120, 100%, 50%);
  --text-danger:      #ff5252;
  --text-error:       #ff6b6b;
  --text-on-accent:   #ffffff;
  --text-high-contrast: #e0e0e0;

  /* Text at specific white-alpha opacities */
  --text-alpha-95: hsla(0, 0%, 100%, 0.95);
  --text-alpha-92: hsla(0, 0%, 100%, 0.92);
  --text-alpha-85: hsla(0, 0%, 100%, 0.85);
  --text-alpha-80: hsla(0, 0%, 100%, 0.8);
  --text-alpha-70: hsla(0, 0%, 100%, 0.7);
  --text-alpha-50: hsla(0, 0%, 100%, 0.5);
  --text-alpha-45: hsla(0, 0%, 100%, 0.45);
  --text-alpha-40: hsla(0, 0%, 100%, 0.4);
  --text-alpha-35: hsla(0, 0%, 100%, 0.35);
  --text-alpha-30: hsla(0, 0%, 100%, 0.3);

  /* ── Border ─────────────────────────────────────────────── */
  --border-main:        hsl(0, 0%, 20%);
  --border-color:       hsla(0, 0%, 100%, 0.15);
  --border-focus:       hsl(201, 100%, 38%);
  --border-secondary:   hsla(0, 0%, 100%, 0.08);
  --border-tertiary:    hsla(0, 0%, 100%, 0.04);
  --border-control:     var(--surface-350);
  --border-input:       hsla(0, 0%, 100%, 0.12);
  --border-input-focus: hsla(0, 0%, 100%, 0.4);
  --border-subtle:      hsla(0, 0%, 100%, 0.06);

  /* ── Accent / Interactive ───────────────────────────────── */
  --accent-brand:         #FF1D46;
  --accent-brand-subtle:  rgba(255, 29, 70, 0.15);
  --accent-secondary:     hsl(202, 100%, 38%);
  --accent-secondary-hover: hsl(203, 100%, 31%);
  --accent-color:         var(--accent-secondary);
  --accent-primary:       var(--accent-secondary);
  --accent-primary-hover: var(--accent-secondary-hover);
  --accent-teal:          #00B5AD;
  --accent-success:       #4caf50;
  --accent-danger:        #e53935;
  --accent-danger-hover:  #c62828;

  --focus-ring-color:             var(--accent-primary);
  --focus-ring-color-transparent: rgba(0, 124, 194, 0.25);

  /* ── Button ─────────────────────────────────────────────── */
  --button-primary-bg:           var(--accent-primary);
  --button-primary-text:         white;
  --button-primary-border:       var(--accent-primary);
  --button-primary-hover-bg:     var(--accent-primary-hover);
  --button-primary-hover-border: var(--accent-primary-hover);
  --button-secondary-bg:         #6c757d;
  --button-secondary-text:       white;
  --button-secondary-border:     #6c757d;
  --button-secondary-hover-bg:   #545b62;
  --button-secondary-hover-border: #545b62;

  /* ── Editor ─────────────────────────────────────────────── */
  --cursor-color:               hsl(180, 100%, 50%);
  --cursor-shadow:              hsla(180, 100%, 50%, 0.5);
  --selection-highlight-background: hsla(180, 100%, 50%, 0.4);
  --selection-handle-background: hsl(180, 100%, 50%);
  --search-highlight-active-background: hsla(220, 100%, 55%, 0.4);
  --ruler-tick-color:           hsl(0, 0%, 40%);
  --restriction-site-color:     hsl(60, 100%, 50%);

  --editor-primer-color:       #FFEB3B;
  --editor-primer-hover-bg:    rgba(255, 235, 59, 0.2);
  --editor-primer-label-color: var(--text-on-accent);
  --editor-annotation-default: #8A2BE2;
  --editor-suggestion-bg:      #3a3a3a;
  --editor-suggestion-label-color: var(--text-on-accent);
  --editor-selection-color:    #00FFFF;

  /* ── Overlay / Tooltip ──────────────────────────────────── */
  --overlay-background:       hsla(0, 0%, 0%, 0.8);
  --overlay-text:             hsl(0, 0%, 100%);
  --overlay-text-secondary:   hsla(0, 0%, 100%, 0.7);
  --overlay-tm-text:          hsl(48, 100%, 50%);
  --tooltip-bg:               #1a1a1a;
  --tooltip-border:           1px solid transparent;

  /* ── Shadow ─────────────────────────────────────────────── */
  --shadow-xs:       0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-sm:       0 2px 5px rgba(0, 0, 0, 0.2);
  --shadow-md:       0 4px 16px rgba(0, 0, 0, 0.4);
  /* Elevated panels: app modals, settings, login card */
  --shadow-modal:    0 6px 18px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-overlay:  rgba(0, 0, 0, 0.5);
  --shadow-dropdown: 0 2px 10px rgba(0, 0, 0, 0.3);
  --shadow-tooltip:  0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-text:     0px 0px 2px rgba(0, 0, 0, 0.8), 0px 0px 3px rgba(0, 0, 0, 0.6);
  --icon-drop-shadow:       drop-shadow(0 0 3px rgba(0, 0, 0, 0.35));
  --icon-drop-shadow-strong: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
  /* Shadow specifically for the nav-rail logo and "new" button. Kept as a
     dedicated token so light theme can still display a shadow for these
     two elements while --icon-drop-shadow remains disabled in light mode. */
  --nav-rail-icon-shadow:   drop-shadow(0 0 2px rgba(0, 0, 0, 0.35));

  /* ── Doctype icon colors ────────────────────────────────────
     Per-document-type accent colors used by `.project-doc-icon`
     (sidebar/modals) and the `.project-name-icon` in the header.
     Each doctype gets its own token so dark and light themes can
     diverge as needed; the consuming SVGs use `fill="currentColor"`
     and a `--<doctype>` modifier class that sets `color: var(...)`. */
  --doctype-icon-dna:       var(--accent-color);
  --doctype-icon-genome:    var(--accent-color);
  --doctype-icon-tree:      #FFD400;
  --doctype-icon-mapping:   #E040FB;
  --doctype-icon-alignment: #70FF00;
  --doctype-icon-aa:        #FF6B00;
  /* Coverage histogram bars (mapping editor). Dark theme keeps the
     historic cobalt; light theme softens to #528BFF (see light-theme
     block) and adds a 0.5px halo via CoverageLayer.css. */
  --coverage-bar-color: #2563eb;

  /* ── Component-specific ─────────────────────────────────── */
  --nav-rail-bg:              var(--surface-300);
  --nav-new-icon:             #CFD0D2;
  --nav-new-bg:               var(--surface-500);
  --nav-new-bg-hover:         var(--surface-450);
  --nav-new-border:           none;
  --nav-tab-hover-bg:         var(--surface-400);
  --nav-icon-inactive:        var(--text-alpha-50);
  --nav-icon-hover:           var(--text-primary);
  /* Color of the icon on the currently active nav-rail tab. Kept separate
     from --nav-rail-active-bar (the colored left-edge bar) so the icon
     and the bar can be themed independently. */
  --nav-tab-active-icon:      var(--text-primary);
  --control-icon-color:       var(--text-main);
  --inc-dec-button-bg:        hsl(0, 0%, 25%);
  --inc-dec-button-bg-hover:  hsl(0, 0%, 38%);
  --card-bg:                  var(--surface-200); 
  --card-bg-hover:            var(--surface-300);
  --card-bg-active:           var(--surface-100);
  --login-container-bg:       var(--surface-50);
  --login-card-bg:            var(--surface-200);
  --login-card-border:        hsl(0, 0%, 20%);
  --login-toggle-color:       var(--text-alpha-92);
  /* Search bars — resting + active (hover/focus/has-value). Sidebar search
     and in-document search are independent so each can be tuned per theme. */
  --sidebar-search-bg:        var(--surface-300);
  --sidebar-search-bg-active: var(--surface-100);
  --doc-view-searchbar-bg:            var(--surface-250);
  --doc-view-searchbar-bg-active:     var(--surface-50);
  --doc-card-bottom-border:   var(--surface-350);
  --nav-rail-border-right:    var(--surface-350);
  --toolbar-divider:          var(--border-color);
  /* Distinct theme tokens for the two "active" left-edge bars. Both are
     white in dark mode (matching pre-existing chrome) and accent in
     light mode (defined in the [data-theme="light"] block below). Each
     is its own knob so the navrail bar and active doc card border can
     diverge later if needed. */
  --nav-rail-active-bar:      var(--text-alpha-80);
  --doc-card-active-border:   var(--text-alpha-80);
  --active-tab-text:          var(--text-alpha-92);
  --backdrop-paint:           rgba(24, 24, 24, 0.85);
  --range-track:              #ccc;
  --linear-map-backbone:      #595959;
  --linear-map-selection-bg:  hsla(180, 80%, 50%, 0.18);
  --linear-map-selection-border: hsl(180, 80%, 50%);
  --table-row-selected:       hsla(210, 80%, 55%, 0.12);
  --table-row-selected-hover: hsla(210, 80%, 55%, 0.18);
  --plasmid-selection-filter:       drop-shadow(0 0 3px rgba(0, 255, 255, 0.6));
  --plasmid-selection-filter-hover: drop-shadow(0 0 6px rgba(0, 255, 255, 0.8));

  /* ── Error state ────────────────────────────────────────── */
  --error-bg:     rgba(220, 53, 69, 0.1);
  --error-border: rgba(220, 53, 69, 0.3);
  --error-text:   #dc3545;
  --error-bg-alt:     hsla(0, 70%, 45%, 0.15);
  --error-border-alt: hsla(0, 70%, 45%, 0.3);
  --error-text-alt:   hsl(0, 80%, 65%);

  /* ── Residue label text ─────────────────────────────────── */
  --residue-label-color:        var(--text-main);
  --residue-label-color-active: #ffffff;
}

/* ── Dark / deoxy palette ─────────────────────────────────── */
/* The default residue palette. Lives in its own block (parallel to */
/* midnight/sanger) so the light variant can diverge independently. */

[data-theme="dark"][data-palette="deoxy"] {
  /* ── Nucleotide palette (deoxy) ─────────────────────────── */
  --nucleotide-bg-active-a: hsl(340, 100%, 50%);
  --nucleotide-bg-active-t: hsl(100, 100%, 32%);
  --nucleotide-bg-active-u: hsl(100, 100%, 32%);
  --nucleotide-bg-active-c: hsl(220, 100%, 55%);
  --nucleotide-bg-active-g: hsl(30, 100%, 48%);
  --nucleotide-bg-active-w: hsl(35, 80%, 60%);
  --nucleotide-bg-active-s: hsl(270, 100%, 55%);
  --nucleotide-bg-active-m: hsl(300, 100%, 50%);
  --nucleotide-bg-active-k: hsl(167, 85%, 35%);
  --nucleotide-bg-active-r: hsl(15, 85%, 50%);
  --nucleotide-bg-active-y: hsl(180, 100%, 35%);
  --nucleotide-bg-active-b: hsl(0, 80%, 30%);
  --nucleotide-bg-active-d: hsl(200, 80%, 30%);
  --nucleotide-bg-active-h: hsl(25, 100%, 30%);
  --nucleotide-bg-active-v: hsl(135, 100%, 20%);
  --nucleotide-bg-active-n: hsl(0, 0%, 45%);

  /* ── Amino acid palette (deoxy) ─────────────────────────── */
  --aa-bg-active-M: hsl(300, 100%, 50%);
  --aa-bg-active-I: hsl(315, 80%, 50%);
  --aa-bg-active-B: hsl(60, 100%, 35%);
  --aa-bg-active-T: hsl(0, 90%, 55%);
  --aa-bg-active-N: hsl(230, 100%, 60%);
  --aa-bg-active-P: hsl(215, 60%, 50%);
  --aa-bg-active-V: hsl(135, 80%, 40%);
  --aa-bg-active-G: hsl(280, 80%, 55%);
  --aa-bg-active-R: hsl(160, 100%, 35%);
  --aa-bg-active-H: hsl(25, 100%, 50%);
  --aa-bg-active-S: hsl(35, 100%, 45%);
  --aa-bg-active-Q: hsl(210, 100%, 50%);
  --aa-bg-active-C: hsl(100, 80%, 40%);
  --aa-bg-active-L: hsl(330, 100%, 50%);
  --aa-bg-active-F: hsl(75, 100%, 35%);
  --aa-bg-active-W: hsl(50, 100%, 40%);
  --aa-bg-active-K: hsl(140, 80%, 40%);
  --aa-bg-active-E: hsl(200, 80%, 45%);
  --aa-bg-active-Y: hsl(260, 80%, 55%);
  --aa-bg-active-D: hsl(190, 80%, 40%);
  --aa-bg-active-A: hsl(300, 70%, 45%);
  --aa-bg-active-X: hsl(0, 0%, 45%);
  --aa-bg-active-Stop: hsla(0, 0%, 0%, 0%);
}

/* ── Dark / Midnight palette ──────────────────────────────── */

[data-theme="dark"][data-palette="midnight"] {
  --nucleotide-bg-active-a: hsl(284, 77%, 39%);
  --nucleotide-bg-active-t: hsl(120, 100%, 27%);
  --nucleotide-bg-active-u: hsl(120, 100%, 27%);
  --nucleotide-bg-active-c: hsl(200, 100%, 37%);
  --nucleotide-bg-active-g: hsl(250, 100%, 60%);
  --nucleotide-bg-active-w: hsl(324, 74%, 49%);
  --nucleotide-bg-active-s: hsl(235, 100%, 59%);
  --nucleotide-bg-active-m: hsl(300, 100%, 41%);
  --nucleotide-bg-active-k: hsl(175, 100%, 26%);
  --nucleotide-bg-active-r: hsl(0, 70%, 54%);
  --nucleotide-bg-active-y: hsl(270, 100%, 50%);
  --nucleotide-bg-active-b: hsl(215, 100%, 45%);
  --nucleotide-bg-active-d: hsl(40, 100%, 39%);
  --nucleotide-bg-active-h: hsl(25, 100%, 39%);
  --nucleotide-bg-active-v: hsl(151, 76%, 38%);
  --nucleotide-bg-active-n: hsl(0, 0%, 35%);

  --aa-bg-active-M: hsl(304, 67%, 48%);
  --aa-bg-active-I: hsl(304, 67%, 30%);
  --aa-bg-active-B: hsl(60, 85%, 25%);
  --aa-bg-active-T: hsl(212, 82%, 33%);
  --aa-bg-active-N: hsl(230, 64%, 36%);
  --aa-bg-active-P: hsl(151, 90%, 19%);
  --aa-bg-active-V: hsl(270, 67%, 36%);
  --aa-bg-active-G: hsl(280, 70%, 35%);
  --aa-bg-active-R: hsl(255, 68%, 42%);
  --aa-bg-active-H: hsl(326, 75%, 30%);
  --aa-bg-active-S: hsl(234, 82%, 39%);
  --aa-bg-active-Q: hsl(210, 75%, 30%);
  --aa-bg-active-C: hsl(288, 61%, 33%);
  --aa-bg-active-L: hsl(151, 90%, 19%);
  --aa-bg-active-F: hsl(190, 100%, 20%);
  --aa-bg-active-W: hsl(196, 86%, 30%);
  --aa-bg-active-K: hsl(140, 70%, 30%);
  --aa-bg-active-E: hsl(200, 70%, 35%);
  --aa-bg-active-Y: hsl(260, 70%, 35%);
  --aa-bg-active-D: hsl(190, 70%, 30%);
  --aa-bg-active-A: hsl(234, 82%, 39%);
  --aa-bg-active-X: hsl(0, 0%, 35%);
  --aa-bg-active-Stop: hsl(0, 0%, 0%);
}

/* ── Dark / Sanger palette ────────────────────────────────── */
/* Traditional Sanger sequencing colors: A=green, C=blue,     */
/* G=dark gray, T=red. Familiar to anyone who has worked      */
/* with chromatogram trace files.                              */

[data-theme="dark"][data-palette="sanger"] {
  --nucleotide-bg-active-a: hsl(130, 80%, 38%);
  --nucleotide-bg-active-t: hsl(0, 85%, 50%);
  --nucleotide-bg-active-u: hsl(0, 85%, 50%);
  --nucleotide-bg-active-c: hsl(220, 90%, 55%);
  --nucleotide-bg-active-g: hsl(0, 0%, 42%);
  --nucleotide-bg-active-w: hsl(60, 70%, 40%);
  --nucleotide-bg-active-s: hsl(250, 60%, 50%);
  --nucleotide-bg-active-m: hsl(170, 70%, 38%);
  --nucleotide-bg-active-k: hsl(0, 40%, 42%);
  --nucleotide-bg-active-r: hsl(80, 60%, 38%);
  --nucleotide-bg-active-y: hsl(330, 60%, 48%);
  --nucleotide-bg-active-b: hsl(240, 40%, 45%);
  --nucleotide-bg-active-d: hsl(50, 50%, 38%);
  --nucleotide-bg-active-h: hsl(100, 40%, 36%);
  --nucleotide-bg-active-v: hsl(170, 50%, 36%);
  --nucleotide-bg-active-n: hsl(0, 0%, 38%);

  --aa-bg-active-M: hsl(300, 100%, 50%);
  --aa-bg-active-I: hsl(315, 80%, 50%);
  --aa-bg-active-B: hsl(60, 100%, 35%);
  --aa-bg-active-T: hsl(0, 90%, 55%);
  --aa-bg-active-N: hsl(230, 100%, 60%);
  --aa-bg-active-P: hsl(215, 60%, 50%);
  --aa-bg-active-V: hsl(130, 80%, 40%);
  --aa-bg-active-G: hsl(280, 80%, 55%);
  --aa-bg-active-R: hsl(160, 100%, 35%);
  --aa-bg-active-H: hsl(25, 100%, 50%);
  --aa-bg-active-S: hsl(35, 100%, 45%);
  --aa-bg-active-Q: hsl(210, 100%, 50%);
  --aa-bg-active-C: hsl(100, 80%, 40%);
  --aa-bg-active-L: hsl(330, 100%, 50%);
  --aa-bg-active-F: hsl(75, 100%, 35%);
  --aa-bg-active-W: hsl(50, 100%, 40%);
  --aa-bg-active-K: hsl(140, 80%, 40%);
  --aa-bg-active-E: hsl(200, 80%, 45%);
  --aa-bg-active-Y: hsl(260, 80%, 55%);
  --aa-bg-active-D: hsl(190, 80%, 40%);
  --aa-bg-active-A: hsl(300, 70%, 45%);
  --aa-bg-active-X: hsl(0, 0%, 45%);
  --aa-bg-active-Stop: hsl(0, 0%, 0%);
}

/* ── Light theme ───────────────────────────────────────────── */

[data-theme="light"] {

  /* ── Surface ────────────────────────────────────────────── */
  --surface-0:   hsl(0, 0%, 100%);
  --surface-50:  hsl(0, 0%, 98%);
  --surface-100: hsl(0, 0%, 97%);
  --surface-150: hsl(0, 0%, 95%);
  --surface-200: hsl(0, 0%, 94%);
  --surface-250: hsl(0, 0%, 92%);
  --surface-300: hsl(0, 0%, 90%);
  --surface-350: hsl(0, 0%, 90%);
  --surface-400: hsl(0, 0%, 90%);
  --surface-450: hsl(0, 0%, 88%);
  --surface-500: hsl(0, 0%, 86%);

  /* Semantic surface aliases */
  --background-main:     var(--surface-150);
  --background-editor:   var(--surface-100);
  --background-primary:  var(--surface-50);
  --background-hover:    var(--surface-300);
  --background-active:   var(--surface-400);
  --background-input:    var(--surface-250);
  --background-disabled: var(--surface-350);

  /* ── Text ───────────────────────────────────────────────── */
  --text-main:        hsl(0, 0%, 16%);
  --text-primary:     hsl(0, 0%, 16%);
  --text-secondary:   hsl(0, 0%, 35%);
  --text-tertiary:    hsl(0, 0%, 48%);
  --text-muted:       hsl(0, 0%, 55%);
  --text-faint:       hsl(0, 0%, 65%);
  --text-placeholder:  hsl(0, 0%, 58%);
  --text-placeholder-alt: hsl(0, 0%, 62%);
  --text-hover:       hsl(0, 0%, 10%);
  --text-disabled:    hsl(0, 0%, 65%);
  --text-success:     hsl(145, 65%, 32%);
  --text-danger:      #dc3545;
  --text-error:       #dc3545;
  --text-on-accent:   #ffffff;
  --text-high-contrast: hsl(0, 0%, 22%);

  /* Cool-tinted semi-transparent text */
  --text-alpha-95: hsla(0, 0%, 15%, 0.95);
  --text-alpha-92: hsla(0, 0%, 15%, 0.92);
  --text-alpha-85: hsla(0, 0%, 15%, 0.85);
  --text-alpha-80: hsla(0, 0%, 15%, 0.80);
  --text-alpha-70: hsla(0, 0%, 15%, 0.70);
  --text-alpha-50: hsla(0, 0%, 15%, 0.50);
  --text-alpha-45: hsla(0, 0%, 15%, 0.45);
  --text-alpha-40: hsla(0, 0%, 15%, 0.40);
  --text-alpha-35: hsla(0, 0%, 15%, 0.35);
  --text-alpha-30: hsla(0, 0%, 15%, 0.30);

  /* ── Border ─────────────────────────────────────────────── */
  --border-main:        hsl(0, 0%, 72%);
  --border-color:       hsl(0, 0%, 85%);
  --border-focus:       hsl(201, 100%, 38%);
  --border-secondary:   var(--surface-350);
  --border-tertiary:    var(--surface-400);
  --border-control:     var(--surface-350);
  --border-input:       hsl(0, 0%, 50%);
  --border-input-focus: hsl(0, 0%, 50%);
  --border-subtle:      var(--surface-350);

  /* ── Accent / Interactive ───────────────────────────────── */
  --accent-brand:         #FF1D46;
  --accent-brand-subtle:  rgba(255, 29, 70, 0.08);
  --accent-secondary:     #007cc2;
  --accent-secondary-hover: #0062a0;
  --accent-color:         var(--accent-secondary);
  --accent-primary:       var(--accent-secondary);
  --accent-primary-hover: var(--accent-secondary-hover);
  --accent-teal:          #0D9488;
  --accent-success:       #2E7D32;
  --accent-danger:        #dc3545;
  --accent-danger-hover:  #c62828;

  --focus-ring-color:             var(--accent-primary);
  --focus-ring-color-transparent: rgba(0, 124, 194, 0.20);

  /* ── Button ─────────────────────────────────────────────── */
  --button-primary-bg:           var(--accent-primary);
  --button-primary-text:         white;
  --button-primary-border:       var(--accent-primary);
  --button-primary-hover-bg:     var(--accent-primary-hover);
  --button-primary-hover-border: var(--accent-primary-hover);
  --button-secondary-bg:         hsl(0, 0%, 90%);
  --button-secondary-text:       var(--text-secondary);
  --button-secondary-border:     hsl(0, 0%, 80%);
  --button-secondary-hover-bg:   hsl(0, 0%, 80%);
  --button-secondary-hover-border: hsl(0, 0%, 70%);

  /* ── Editor ─────────────────────────────────────────────── */
  --cursor-color:               hsl(0, 0%, 35%);
  --cursor-shadow:              transparent;
  --selection-highlight-background: hsla(210, 100%, 55%, 0.22);
  --selection-handle-background: hsl(210, 100%, 45%);
  --search-highlight-active-background: hsla(220, 100%, 50%, 0.22);
  --ruler-tick-color:           hsl(0, 0%, 75%);
  --restriction-site-color:     hsl(45, 100%, 42%);

  --editor-primer-color:       hsl(45, 100%, 42%);
  --editor-primer-hover-bg:    rgba(184, 150, 10, 0.12);
  /* Confirmed primer annotations in light theme render as a thin underline
     with no fill, so the default white-on-accent label is illegible
     against the editor's pale pane. Switch to opaque black for legibility. */
  --editor-primer-label-color: rgba(0, 0, 0, 0.8);
  --editor-annotation-default: #7C3AED;
  --editor-suggestion-bg:      hsl(0, 0%, 72%);
  /* Suggestion labels sit over the translucent suggestion bar where
     white-on-accent is illegible. Use semi-opaque black so the label
     reads cleanly against the pale fill. */
  --editor-suggestion-label-color: rgba(0, 0, 0, 0.7);
  --editor-selection-color:    hsl(210, 100%, 45%);

  /* ── Overlay / Tooltip ──────────────────────────────────── */
  --overlay-background:       hsla(0, 0%, 10%, 0.50);
  --overlay-text:             hsl(0, 0%, 16%);
  --overlay-text-secondary:   hsla(0, 0%, 15%, 0.70);
  --overlay-tm-text:          hsl(45, 100%, 42%);
  --tooltip-bg:               hsl(0, 0%, 100%);
  --tooltip-border:           1px solid var(--border-color);

  /* ── Shadow ─────────────────────────────────────────────── */
  --shadow-xs:       0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:       0 1px 4px rgba(0, 0, 0, 0.08);
  --shadow-md:       0 4px 12px rgba(0, 0, 0, 0.10);
  --shadow-modal:    0 6px 18px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.06);
  --shadow-overlay:  rgba(0, 0, 0, 0.20);
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-tooltip:  0 2px 8px rgba(0, 0, 0, 0.18);
  --shadow-text:     0px 0px 2px rgba(0, 0, 0, 0.7), 0px 0px 3px rgba(0, 0, 0, 0.5);
  --icon-drop-shadow:       none;
  --icon-drop-shadow-strong: none;
  /* Light theme keeps a shadow for the nav-rail logo and "new" button even
     though the general icon shadow is disabled. */
  --nav-rail-icon-shadow:   drop-shadow(0 0 2px rgba(0, 0, 0, 0.3));

  /* ── Doctype icon colors ──────────────────────────────────── */
  --doctype-icon-dna:       var(--accent-color);
  --doctype-icon-genome:    var(--accent-color);
  --doctype-icon-tree:      hsl(42, 100%, 50%);
  /* Coverage histogram bars (mapping editor). Theme-aware so the depth
     track stays legible against the editor surface; light theme uses a
     softer cobalt that contrasts with the white background without
     overpowering it, plus the 0.5px residue halo trick to give the bars
     a crisp edge. */
  --coverage-bar-color: #528BFF;
  --doctype-icon-mapping:   hsl(291, 96%, 62%);
  --doctype-icon-alignment: hsl(94, 100%, 35%);
  --doctype-icon-aa:        hsl(25, 100%, 50%);

  /* ── Component-specific ─────────────────────────────────── */
  --nav-rail-bg:              var(--surface-400);
  --nav-new-icon:             hsl(0, 0%, 25%);
  --nav-new-bg:               hsl(0, 0%, 94%);
  --nav-new-bg-hover:         hsl(0, 0%, 98%);
  --nav-new-border:           none;
  --nav-tab-hover-bg:         var(--surface-500);
  --nav-icon-inactive:        var(--text-alpha-50);
  --nav-icon-hover:           var(--nav-tab-active-icon);
  /* Match the plus icon in the new-doc button so the active tab icon reads
     as a neutral charcoal, while --nav-rail-active-bar (the left bar)
     keeps using the accent color. */
  --nav-tab-active-icon:      var(--nav-new-icon);
  --control-icon-color:       var(--text-main);
  --inc-dec-button-bg:        hsl(0, 0%, 90%);
  --inc-dec-button-bg-hover:  hsl(0, 0%, 82%);
  --card-bg:                  var(--surface-200);
  --card-bg-hover:            var(--surface-250);
  --card-bg-active:           var(--surface-100);
  --login-container-bg:       var(--surface-300);
  --login-card-bg:            var(--surface-200);
  --login-card-border:        hsl(0, 0%, 84%);
  --login-toggle-color:       var(--accent-color);
  /* Search bars — resting + active (hover/focus/has-value). */
  --sidebar-search-bg:        var(--surface-400);
  --sidebar-search-bg-active: var(--surface-100);
  --doc-view-searchbar-bg:            var(--surface-300);
  --doc-view-searchbar-bg-active:     var(--surface-50);
  --doc-card-bottom-border:   var(--surface-450);
  --nav-rail-border-right:    hsl(0, 0%, 82%);
  --toolbar-divider:          var(--border-color);
  /* Distinct theme tokens for the two "active" left-edge bars. */
  --nav-rail-active-bar:      var(--accent-secondary);
  --doc-card-active-border:   var(--accent-secondary);
  --active-tab-text:          var(--text-alpha-92);
  --backdrop-paint:           rgba(255, 255, 255, 0.88);
  --range-track:              hsl(0, 0%, 82%);
  --linear-map-backbone:      hsl(0, 0%, 72%);
  --linear-map-selection-bg:  hsla(210, 80%, 50%, 0.18);
  --linear-map-selection-border: hsl(210, 80%, 50%);
  --table-row-selected:       hsla(210, 80%, 55%, 0.10);
  --table-row-selected-hover: hsla(210, 80%, 55%, 0.16);
  --plasmid-selection-filter:       drop-shadow(0 0 3px rgba(37, 99, 235, 0.50));
  --plasmid-selection-filter-hover: drop-shadow(0 0 6px rgba(37, 99, 235, 0.70));

  /* ── Error state ────────────────────────────────────────── */
  --error-bg:     rgba(220, 53, 69, 0.07);
  --error-border: rgba(220, 53, 69, 0.20);
  --error-text:   #dc3545;
  --error-bg-alt:     hsla(0, 70%, 50%, 0.07);
  --error-border-alt: hsla(0, 70%, 50%, 0.20);
  --error-text-alt:   hsl(0, 70%, 42%);

  /* ── Residue label text ─────────────────────────────────── */
  --residue-label-color:        hsl(215, 20%, 16%);
  --residue-label-color-active: #ffffff;
}

/* ── Light / deoxy palette ───────────────────────────────── */
/* Light variant: same hues/saturation as the dark deoxy palette */
/* with lightness bumped +10% so residues read on white surfaces. */

[data-theme="light"][data-palette="deoxy"] {
  /* ── Nucleotide palette (deoxy) ─────────────────────────── */
  --nucleotide-bg-active-a: hsl(340, 85%, 65%);
  --nucleotide-bg-active-t: hsl(100, 67%, 43%);
  --nucleotide-bg-active-u: hsl(100, 67%, 43%);
  --nucleotide-bg-active-c: hsl(220, 100%, 66%);
  --nucleotide-bg-active-g: hsl(30, 96%, 58%);
  --nucleotide-bg-active-w: hsl(35, 80%, 60%);
  --nucleotide-bg-active-s: hsl(270, 100%, 70%);
  --nucleotide-bg-active-m: hsl(300, 68%, 60%);
  --nucleotide-bg-active-k: hsl(167, 85%, 40%);
  --nucleotide-bg-active-r: hsl(15, 85%, 60%);
  --nucleotide-bg-active-y: hsl(180, 100%, 35%);
  --nucleotide-bg-active-b: hsl(0, 60%, 58%);
  --nucleotide-bg-active-d: hsl(200, 100%, 53%);
  --nucleotide-bg-active-h: hsl(25, 90%, 48%);
  --nucleotide-bg-active-v: hsl(135, 80%, 40%);
  --nucleotide-bg-active-n: hsl(0, 0%, 55%);

  /* ── Amino acid palette (deoxy) ─────────────────────────── */
  --aa-bg-active-M: hsl(300, 68%, 60%);
  --aa-bg-active-I: hsl(315, 55%, 60%);
  --aa-bg-active-B: hsl(60, 100%, 45%);
  --aa-bg-active-T: hsl(0, 90%, 65%);
  --aa-bg-active-N: hsl(230, 100%, 70%);
  --aa-bg-active-P: hsl(215, 60%, 60%);
  --aa-bg-active-V: hsl(135, 80%, 40%);
  --aa-bg-active-G: hsl(280, 80%, 65%);
  --aa-bg-active-R: hsl(160, 100%, 45%);
  --aa-bg-active-H: hsl(25, 90%, 48%);
  --aa-bg-active-S: hsl(35, 100%, 55%);
  --aa-bg-active-Q: hsl(210, 100%, 60%);
  --aa-bg-active-C: hsl(100, 80%, 50%);
  --aa-bg-active-L: hsl(330, 100%, 60%);
  --aa-bg-active-F: hsl(75, 100%, 45%);
  --aa-bg-active-W: hsl(35, 80%, 60%);
  --aa-bg-active-K: hsl(167, 85%, 40%);
  --aa-bg-active-E: hsl(200, 80%, 55%);
  --aa-bg-active-Y: hsl(260, 80%, 65%);
  --aa-bg-active-D: hsl(200, 100%, 53%);
  --aa-bg-active-A: hsl(300, 33%, 55%);
  --aa-bg-active-X: hsl(0, 0%, 55%);
  --aa-bg-active-Stop: hsla(0, 0%, 100%, 0%);
}

/* ── Light / Pastel palette ──────────────────────────────── */
/* Easter-egg / cotton-candy vibes — playful, candy-bright   */
/* pastels with their own distinct hue map.                   */

[data-theme="light"][data-palette="pastel"] {
  --nucleotide-bg-active-a: hsl(330, 72%, 65%);   /* bubblegum pink */
  --nucleotide-bg-active-t: hsl(160, 55%, 55%);   /* mint green */
  --nucleotide-bg-active-u: hsl(160, 55%, 55%);
  --nucleotide-bg-active-c: hsl(200, 68%, 62%);   /* baby blue */
  --nucleotide-bg-active-g: hsl(270, 55%, 68%);   /* lavender */
  --nucleotide-bg-active-w: hsl(45, 70%, 62%);    /* buttercup yellow */
  --nucleotide-bg-active-s: hsl(290, 50%, 66%);   /* orchid */
  --nucleotide-bg-active-m: hsl(345, 60%, 68%);   /* cotton-candy pink */
  --nucleotide-bg-active-k: hsl(175, 50%, 55%);   /* seafoam */
  --nucleotide-bg-active-r: hsl(15, 65%, 66%);    /* peach */
  --nucleotide-bg-active-y: hsl(185, 55%, 58%);   /* robin-egg */
  --nucleotide-bg-active-b: hsl(0, 52%, 65%);     /* soft coral */
  --nucleotide-bg-active-d: hsl(230, 52%, 68%);   /* periwinkle */
  --nucleotide-bg-active-h: hsl(30, 62%, 64%);    /* apricot */
  --nucleotide-bg-active-v: hsl(140, 45%, 58%);   /* pistachio */
  --nucleotide-bg-active-n: hsl(220, 30%, 68%);   /* soft slate */

  --aa-bg-active-M: hsl(310, 55%, 66%);           /* mauve */
  --aa-bg-active-I: hsl(340, 52%, 68%);           /* rose */
  --aa-bg-active-B: hsl(55, 55%, 60%);            /* lemon chiffon */
  --aa-bg-active-T: hsl(5, 60%, 68%);             /* salmon */
  --aa-bg-active-N: hsl(215, 58%, 68%);           /* cornflower */
  --aa-bg-active-P: hsl(245, 45%, 70%);           /* wisteria */
  --aa-bg-active-V: hsl(145, 48%, 56%);           /* jade */
  --aa-bg-active-G: hsl(280, 48%, 68%);           /* lilac */
  --aa-bg-active-R: hsl(170, 52%, 55%);           /* turquoise */
  --aa-bg-active-H: hsl(25, 62%, 64%);            /* tangerine cream */
  --aa-bg-active-S: hsl(40, 60%, 62%);            /* honey */
  --aa-bg-active-Q: hsl(195, 55%, 62%);           /* sky */
  --aa-bg-active-C: hsl(120, 42%, 58%);           /* spring green */
  --aa-bg-active-L: hsl(350, 55%, 66%);           /* flamingo */
  --aa-bg-active-F: hsl(80, 48%, 58%);            /* chartreuse */
  --aa-bg-active-W: hsl(50, 55%, 60%);            /* dandelion */
  --aa-bg-active-K: hsl(155, 48%, 56%);           /* spearmint */
  --aa-bg-active-E: hsl(205, 50%, 64%);           /* powder blue */
  --aa-bg-active-Y: hsl(265, 48%, 68%);           /* amethyst */
  --aa-bg-active-D: hsl(180, 48%, 58%);           /* aqua */
  --aa-bg-active-A: hsl(295, 42%, 66%);           /* plum blossom */
  --aa-bg-active-X: hsl(220, 28%, 68%);           /* muted periwinkle */
  --aa-bg-active-Stop: hsl(220, 25%, 48%);        /* dusk */
}

/* ── Light / Sanger palette ─────────────────────────────── */
/* Traditional Sanger sequencing colors tuned for light      */
/* backgrounds: A=green, C=blue, G=dark gray, T=red.         */

[data-theme="light"][data-palette="sanger"] {
  --nucleotide-bg-active-a: hsl(130, 65%, 35%);
  --nucleotide-bg-active-t: hsl(0, 72%, 48%);
  --nucleotide-bg-active-u: hsl(0, 72%, 48%);
  --nucleotide-bg-active-c: hsl(220, 75%, 48%);
  --nucleotide-bg-active-g: hsl(0, 0%, 35%);
  --nucleotide-bg-active-w: hsl(60, 55%, 38%);
  --nucleotide-bg-active-s: hsl(250, 50%, 48%);
  --nucleotide-bg-active-m: hsl(170, 55%, 36%);
  --nucleotide-bg-active-k: hsl(0, 35%, 40%);
  --nucleotide-bg-active-r: hsl(80, 48%, 36%);
  --nucleotide-bg-active-y: hsl(330, 50%, 44%);
  --nucleotide-bg-active-b: hsl(240, 35%, 44%);
  --nucleotide-bg-active-d: hsl(50, 45%, 36%);
  --nucleotide-bg-active-h: hsl(100, 35%, 34%);
  --nucleotide-bg-active-v: hsl(170, 42%, 34%);
  --nucleotide-bg-active-n: hsl(0, 0%, 48%);

  --aa-bg-active-M: hsl(300, 65%, 48%);
  --aa-bg-active-I: hsl(315, 55%, 48%);
  --aa-bg-active-B: hsl(60, 60%, 38%);
  --aa-bg-active-T: hsl(0, 65%, 52%);
  --aa-bg-active-N: hsl(230, 65%, 52%);
  --aa-bg-active-P: hsl(215, 48%, 48%);
  --aa-bg-active-V: hsl(130, 55%, 38%);
  --aa-bg-active-G: hsl(280, 55%, 48%);
  --aa-bg-active-R: hsl(160, 65%, 38%);
  --aa-bg-active-H: hsl(25, 72%, 48%);
  --aa-bg-active-S: hsl(35, 72%, 44%);
  --aa-bg-active-Q: hsl(210, 65%, 48%);
  --aa-bg-active-C: hsl(100, 55%, 38%);
  --aa-bg-active-L: hsl(330, 65%, 48%);
  --aa-bg-active-F: hsl(75, 62%, 38%);
  --aa-bg-active-W: hsl(50, 62%, 40%);
  --aa-bg-active-K: hsl(140, 55%, 38%);
  --aa-bg-active-E: hsl(200, 55%, 44%);
  --aa-bg-active-Y: hsl(260, 55%, 48%);
  --aa-bg-active-D: hsl(190, 55%, 40%);
  --aa-bg-active-A: hsl(300, 48%, 44%);
  --aa-bg-active-X: hsl(215, 35%, 52%);
  --aa-bg-active-Stop: hsl(215, 35%, 32%);
}
/* hmr test 1777428010 */
/* test 1777429939 */
/* HMR probe */
/* probe2 */
/* probe3 */