/* 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%);
  /* Darker yellow used for tandem-repeat follower cut markers in the
     SequenceEditor (see RestrictionSiteLayer.css). The leader keeps
     `--restriction-site-color`; followers shift toward dark gold so
     the eye reads the run as "leader + dim followers". */
  --restriction-site-color-tandem-follower: hsl(48, 100%, 32%);

  --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;

  /* ── Feature-locked annotation backgrounds (dark theme) ───
     Annotations whose `feature` matches one of these locked kinds render
     using these vars instead of the user-stored hex. Each var is its own
     symbolic token (not a direct alias in the renderer) so the cross-doc
     mapping stays grep-able and a future audit can swap a single feature's
     color without touching every consumer. Today the named features below
     recycle the corresponding nucleotide-active swatch — this is a deliberate
     design choice to reuse the residue palette's palette-aware tones for free,
     and the indirection lets us diverge later without a renderer change.
     Light theme defines a parallel block at the matching insertion point.
     Free-feature kinds (Misc feature, Misc binding, Other, Search result,
     Source) keep using the user-picked / per-fragment stored hex; only
     locked kinds are listed here. (Source stays free so the cloning
     workflows can color vector vs insert vs each Gibson/Golden-Gate part
     differently for provenance at-a-glance.) */
  --feature-bg-cds:           var(--nucleotide-bg-active-w);
  --feature-bg-terminator:    var(--nucleotide-bg-active-a);
  --feature-bg-promoter:      var(--nucleotide-bg-active-t);
  --feature-bg-origin:        var(--nucleotide-bg-active-c);
  --feature-bg-protein-bind:  var(--nucleotide-bg-active-k);
  --feature-bg-gene:          var(--nucleotide-bg-active-g);
  --feature-bg-rbs:           var(--nucleotide-bg-active-s);
  --feature-bg-signal-peptide: var(--nucleotide-bg-active-m);
  --feature-bg-exon:          var(--nucleotide-bg-active-y);
  --feature-bg-regulatory:    var(--aa-bg-active-T);
  --feature-bg-ltr:           var(--nucleotide-bg-active-v);
  --feature-bg-intron:        var(--nucleotide-bg-active-n);
  --feature-bg-mrna:          var(--aa-bg-active-Q);
  --feature-bg-trna:          var(--aa-bg-active-N);
  --feature-bg-rrna:          var(--aa-bg-active-E);
  --feature-bg-domain:        var(--aa-bg-active-Y);
  --feature-bg-motif:         var(--aa-bg-active-G);
  --feature-bg-coiled-coil:   var(--aa-bg-active-R);
  --feature-bg-disordered:    var(--aa-bg-active-X);
  --feature-bg-transmembrane: var(--aa-bg-active-W);
  --feature-bg-repeat:        var(--nucleotide-bg-active-h);
  --feature-bg-region:        var(--aa-bg-active-P);
  --feature-bg-ligation:      var(--nucleotide-bg-active-r);

  /* ── 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;
  /* Tree branch color used for clades outside the user-highlighted
     subtree. On dark surfaces a darker yellow recedes; light theme
     defines a parallel token that fades toward white. */
  --tree-branch-dimmed:     #806A00;
  /* 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;
  /* Outer elevation shadow for the nav-rail "new" button. Tokenized so
     light theme can soften it (bright surfaces don't need a heavy cast). */
  --nav-new-shadow:           0 1px 2px hsla(0, 0%, 0%, 0.45);
  --nav-new-shadow-hover:     0 1px 3px hsla(0, 0%, 0%, 0.5);
  /* Top-left bevel highlight rim. Theme-aware because a translucent white
     highlight on a near-white surface (light theme) is barely visible and
     needs much higher alpha to read as a lit edge. */
  --nav-new-bevel-hi:         inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.28);
  --nav-new-bevel-hi-hover:   inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.34);
  --nav-new-bevel-hi-active:  inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.20);
  --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);
  /* Peak color for the "new document" pulse overlay on sidebar cards.
     Animation fades from full token opacity to 0, so the alpha here
     is the peak intensity. Dark theme uses translucent white; the
     light-theme override below uses translucent black so the flash
     reads against a near-white card surface. */
  --sidebar-card-pulse:       hsla(0, 0%, 100%, 0.1);
  --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);
  --circular-selection-filter:       drop-shadow(0 0 3px rgba(0, 255, 255, 0.6));
  --circular-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%);
  --restriction-site-color-tandem-follower: hsl(48, 95%, 70%);

  --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;

  /* Feature-locked annotation backgrounds (light theme). Mirrors the
     dark-theme block so the two palettes can diverge without renderer
     changes. Today both reuse the nucleotide-active swatches (and
     `--aa-bg-active-T` for Regulatory). */
  --feature-bg-cds:           var(--nucleotide-bg-active-w);
  --feature-bg-terminator:    var(--nucleotide-bg-active-a);
  --feature-bg-promoter:      var(--nucleotide-bg-active-t);
  --feature-bg-origin:        var(--nucleotide-bg-active-c);
  --feature-bg-protein-bind:  var(--nucleotide-bg-active-k);
  --feature-bg-gene:          var(--nucleotide-bg-active-g);
  --feature-bg-rbs:           var(--nucleotide-bg-active-s);
  --feature-bg-signal-peptide: var(--nucleotide-bg-active-m);
  --feature-bg-exon:          var(--nucleotide-bg-active-y);
  --feature-bg-regulatory:    var(--aa-bg-active-T);
  --feature-bg-ltr:           var(--nucleotide-bg-active-v);
  --feature-bg-intron:        var(--nucleotide-bg-active-n);
  --feature-bg-mrna:          var(--aa-bg-active-Q);
  --feature-bg-trna:          var(--aa-bg-active-N);
  --feature-bg-rrna:          var(--aa-bg-active-E);
  --feature-bg-domain:        var(--aa-bg-active-Y);
  --feature-bg-motif:         var(--aa-bg-active-G);
  --feature-bg-coiled-coil:   var(--aa-bg-active-R);
  --feature-bg-disordered:    var(--aa-bg-active-X);
  --feature-bg-transmembrane: var(--aa-bg-active-W);
  --feature-bg-repeat:        var(--nucleotide-bg-active-h);
  --feature-bg-region:        var(--aa-bg-active-P);
  --feature-bg-ligation:      var(--nucleotide-bg-active-r);
  --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.2));

  /* ── Doctype icon colors ──────────────────────────────────── */
  --doctype-icon-dna:       var(--accent-color);
  --doctype-icon-genome:    var(--accent-color);
  --doctype-icon-tree:      hsl(42, 100%, 50%);
  /* Light-theme counterpart for dimmed branches: lighten toward the
     white editor background instead of darkening (which would
     increase contrast and read as "selected"). */
  --tree-branch-dimmed:     hsl(42, 100%, 82%);
  /* 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;
  /* Lightened ~50% vs dark theme — bright background needs less cast. */
  --nav-new-shadow:           0 1px 2px hsla(0, 0%, 0%, 0.22);
  --nav-new-shadow-hover:     0 1px 3px hsla(0, 0%, 0%, 0.25);
  /* Highlight rim needs much higher opacity on the near-white surface to
     read as a lit edge (white-on-white otherwise disappears). */
  --nav-new-bevel-hi:         inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.95);
  --nav-new-bevel-hi-hover:   inset 1px 1px 0 0 hsla(0, 0%, 100%, 1);
  --nav-new-bevel-hi-active:  inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.75);
  --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%);
  --sidebar-card-pulse:       hsla(0, 0%, 0%, 0.1);
  --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);
  --circular-selection-filter:       drop-shadow(0 0 3px rgba(37, 99, 235, 0.50));
  --circular-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 */