/* ═════════════════════════════════════════════════════════════════
   OmicsLab Premium Design System
   Dark-first theme with light option, bioinformatics-focused palette
   ═════════════════════════════════════════════════════════════════ */

/* ── COLOR PALETTE ────────────────────────────────────────────────────── */

/* Base Neutrals - Deep Navy/Ink Backgrounds */
:root {
  /* Dark Theme (Default) */
  --bg-navy-50:   #030406;   /* Almost black */
  --bg-navy-100:  #060A14;   /* Deep navy */
  --bg-navy-200:  #0D1524;   /* Navy canvas */
  --bg-navy-300:  #111B2E;   /* Surface */
  --bg-navy-400:  #182236;   /* Overlay */
  --bg-navy-500:  #1E2A42;   /* Elevated surface */

  /* Text Colors */
  --text-navy-50:   #F8F6F2;   /* Pure white */
  --text-navy-100:  #E4DDD2;   /* Primary text */
  --text-navy-200:  #A8A098;   /* Secondary text */
  --text-navy-300:  #6E6860;   /* Muted text */
  --text-navy-400:  #3C3840;   /* Faint text */

  /* Borders */
  --border-navy-100:  #182236;
  --border-navy-200:  #243048;
  --border-navy-300:  #354060;

  /* ── VIVID ACCENT (Bioinformatics-inspired) ──────────────────────── */
  --accent-vivid:     #00C4A0;   /* Teal green - Lab success color */
  --accent-vivid-dim: #007A6A;
  --accent-vivid-bg:  rgba(0,196,160,0.08);
  --accent-vivid-glow:rgba(0,196,160,0.15);

  /* ── NUCLEOTIDE COLORS (Colorblind-safe palette) ─────────────────── */
  /* Using ColorBrewer-inspired palette optimized for deuteranopia/protanopia */
  --nucleotide-A:   #0072B2;   /* Blue     - Adenine     */
  --nucleotide-T:   #D55E00;   /* Vermilion- Thymine/Uracil */
  --nucleotide-G:   #009E73;   /* Bluish green - Guanine   */
  --nucleotide-C:   #CC79A7;   /* Reddish purple - Cytosine */

  /* Nucleotide variants for different states */
  --nucleotide-A-dim:   #005A87;
  --nucleotide-T-dim:   #A44200;
  --nucleotide-G-dim:   #007E5C;
  --nucleotide-C-dim:   #A36186;

  /* ── SEMANTIC COLORS ─────────────────────────────────────────────── */
  --success:      var(--nucleotide-G);    /* Green for success states */
  --warning:      #E3B341;               /* Yellow for warnings */
  --error:        #D55E00;               /* Vermilion for errors */
  --info:         #56B4E9;               /* Sky blue for info */

  /* ── LIGHT THEME OVERRIDES ───────────────────────────────────────── */
  --bg-navy-50-light:   #F8F6F2;
  --bg-navy-100-light:  #FFFFFF;
  --bg-navy-200-light:  #F4F1EB;
  --bg-navy-300-light:  #EDE9E2;
  --bg-navy-400-light:  #E0DCD0;
  --bg-navy-500-light:  #D8D2C8;

  --text-navy-50-light:   #060A14;
  --text-navy-100-light:  #14110C;
  --text-navy-200-light:  #3D382F;
  --text-navy-300-light:  #79726A;
  --text-navy-400-light:  #B0A898;

  --border-navy-100-light: #D8D2C8;
  --border-navy-200-light: #E8E3DA;
  --border-navy-300-light: #BDB6AA;
}

/* Light theme variables */
[data-theme="light"] {
  --bg-root:      var(--bg-navy-100-light);
  --bg-base:      var(--bg-navy-100-light);
  --bg-canvas:    var(--bg-navy-200-light);
  --bg-surface:   var(--bg-navy-300-light);
  --bg-overlay:   var(--bg-navy-400-light);
  --bg-inset:     var(--bg-navy-200-light);

  --text-primary:   var(--text-navy-100-light);
  --text-secondary: var(--text-navy-200-light);
  --text-muted:     var(--text-navy-300-light);
  --text-faint:     var(--text-navy-400-light);
  --text-link:      var(--nucleotide-G);

  --border-default: var(--border-navy-100-light);
  --border-muted:   var(--border-navy-200-light);
  --border-strong:  var(--border-navy-300-light);

  --accent-vivid:      var(--nucleotide-G);
  --accent-vivid-dim:  var(--nucleotide-G-dim);
  --accent-vivid-bg:   rgba(0,158,115,0.08);
  --accent-vivid-glow: rgba(0,158,115,0.15);

  /* Nucleotide colors stay the same for scientific consistency */
}

/* ── TYPE SCALE ─────────────────────────────────────────────────────── */

/* Font Families */
:root {
  --font-sans-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-sans-heading: 'Sora', 'Inter', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Text Sizes */
  --text-2xs:   0.625rem;   /* 10px */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1rem;       /* 16px */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */

  /* Font Weights */
  --font-weight-light:     300;
  --font-weight-regular:   400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800;
  --font-weight-black:     900;

  /* Line Heights */
  --leading-none:   1;
  --leading-tight:  1.25;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.75;
  --leading-loose:  2;
}

/* ── SPACING SCALE ─────────────────────────────────────────────────── */
:root {
  /* 4px-based spacing system */
  --space-0:   0rem;      /* 0px */
  --space-05:  0.125rem;  /* 2px */
  --space-1:   0.25rem;   /* 4px */
  --space-15:  0.375rem;  /* 6px */
  --space-2:   0.5rem;    /* 8px */
  --space-25:  0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-35:  0.875rem;  /* 14px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-9:   2.25rem;   /* 36px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-28:  7rem;      /* 112px */
  --space-32:  8rem;      /* 128px */
  --space-36:  9rem;      /* 144px */
  --space-40:  10rem;     /* 160px */
}

/* ── BORDER RADIUS ─────────────────────────────────────────────────── */
:root {
  --radius-none:   0px;
  --radius-xs:     2px;
  --radius-sm:     4px;
  --radius-md:     6px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-2xl:    16px;
  --radius-3xl:    20px;
  --radius-full:   9999px;

  /* Specialized radii */
  --radius-btn:    8px;
  --radius-card:   12px;
  --radius-dialog: 16px;
}

/* ── ELEVATION / SHADOWS ───────────────────────────────────────────── */
:root {
  /* Shadow system - subtle and purposeful */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
  --shadow-2xl:  0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px rgba(0,0,0,0.06);

  /* Accent-specific shadows */
  --shadow-accent-sm:  0 0 0 1px rgba(0,196,160,0.3), 0 2px 4px rgba(0,0,0,0.1);
  --shadow-accent-md:  0 0 0 1px rgba(0,196,160,0.3), 0 4px 6px -1px rgba(0,196,160,0.15), 0 2px 4px -1px rgba(0,196,160,0.1);

  /* Outline rings for focus states */
  --ring-offset-width: 0px;
  --ring-offset-color: #fff;
  --ring-width: 3px;
  --ring-color: rgba(0,196,160,0.5);
  --ring-offset-shadow: 0 0 #0000;
  --ring-shadow: var(--ring-width) 0 0 0 var(--ring-color);
}

/* ── MOTION / TRANSITIONS ─────────────────────────────────────────── */
:root {
  /* Duration */
  --duration-75:   75ms;
  --duration-100:  100ms;
  --duration-150:  150ms;
  --duration-200:  200ms;
  --duration-300:  300ms;
  --duration-500:  500ms;
  --duration-700:  700ms;
  --duration-1000: 1000ms;

  /* Easing functions */
  --ease-linear:   linear;
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --ease-out:      cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);

  /* Custom easings for bioinformatics feel */
  --ease-bio-in:   cubic-bezier(0.16, 1, 0.3, 1);      /* Similar to previous */
  --ease-bio-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bio-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* Animation properties */
  --animate-pulse:   pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce:  bounce 1s infinite;
  --animate-spin:    spin 1s linear infinite;
  --animate-ping:    ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* Keyframe animations */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
@keyframes bounce {
  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }
  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* ── UTILITY CLASSES ──────────────────────────────────────────────── */

/* Text utilities */
.text-navy-50 { color: var(--text-navy-50); }
.text-navy-100 { color: var(--text-navy-100); }
.text-navy-200 { color: var(--text-navy-200); }
.text-navy-300 { color: var(--text-navy-300); }
.text-navy-400 { color: var(--text-navy-400}; }

.text-accent { color: var(--accent-vivid); }
.text-accent-dim { color: var(--accent-vivid-dim); }

.text-nucleotide-A { color: var(--nucleotide-A); }
.text-nucleotide-T { color: var(--nucleotide-T); }
.text-nucleotide-G { color: var(--nucleotide-G); }
.text-nucleotide-C { color: var(--nucleotide-C); }

/* Background utilities */
.bg-navy-50 { background-color: var(--bg-navy-50); }
.bg-navy-100 { background-color: var(--bg-navy-100); }
.bg-navy-200 { background-color: var(--bg-navy-200); }
.bg-navy-300 { background-color: var(--bg-navy-300); }
.bg-navy-400 { background-color: var(--bg-navy-400); }
.bg-navy-500 { background-color: var(--bg-navy-500); }

.bg-accent { background-color: var(--accent-vivid); }
.bg-accent-dim { background-color: var(--accent-vivid-dim); }
.bg-accent-bg { background-color: var(--accent-vivid-bg); }

.bg-nucleotide-A { background-color: var(--nucleotide-A); }
.bg-nucleotide-T { background-color: var(--nucleotide-T); }
.bg-nucleotide-G { background-color: var(--nucleotide-G); }
.bg-nucleotide-C { background-color: var(--nucleotide-C); }

/* Border utilities */
.border-navy-100 { border-color: var(--border-navy-100); }
.border-navy-200 { border-color: var(--border-navy-200); }
.border-navy-300 { border-color: var(--border-navy-300); }

.border-accent { border-color: var(--accent-vivid); }
.border-accent-dim { border-color: var(--accent-vivid-dim); }

/* Shadow utilities */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }

.shadow-accent-sm { box-shadow: var(--shadow-accent-sm); }
.shadow-accent-md { box-shadow: var(--shadow-accent-md); }

/* Radius utilities */
.rounded-none { border-radius: var(--radius-none); }
.rounded-xs { border-radius: var(--radius-xs); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-3xl { border-radius: var(--radius-3xl); }
.rounded-full { border-radius: var(--radius-full); }

/* Spacing utilities */
.m-0 { margin: var(--space-0); }
.m-05 { margin: var(--space-05); }
.m-1 { margin: var(--space-1); }
.m-15 { margin: var(--space-15); }
.m-2 { margin: var(--space-2); }
.m-25 { margin: var(--space-25); }
.m-3 { margin: var(--space-3); }
.m-35 { margin: var(--space-35); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-7 { margin: var(--space-7); }
.m-8 { margin: var(--space-8); }
.m-9 { margin: var(--space-9); }
.m-10 { margin: var(--space-10); }
.m-12 { margin: var(--space-12); }
.m-14 { margin: var(--space-14); }
.m-16 { margin: var(--space-16); }
.m-20 { margin: var(--space-20); }
.m-24 { margin: var(--space-24); }
.m-28 { margin: var(--space-28); }
.m-32 { margin: var(--space-32); }
.m-36 { margin: var(--space-36); }
.m-40 { margin: var(--space-40); }

.mx-0 { margin-left: var(--space-0); margin-right: var(--space-0); }
.my-0 { margin-top: var(--space-0); margin-bottom: var(--space-0); }
/* ... could continue with all combinations but keeping it reasonable */

/* Padding utilities with same pattern */
.p-0 { padding: var(--space-0); }
.p-05 { padding: var(--space-05); }
.p-1 { padding: var(--space-1); }
.p-15 { padding: var(--space-15); }
.p-2 { padding: var(--space-2); }
.p-25 { padding: var(--space-25); }
.p-3 { padding: var(--space-3); }
.p-35 { padding: var(--space-35); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }
.p-7 { padding: var(--space-7); }
.p-8 { padding: var(--space-8); }
.p-9 { padding: var(--space-9); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }
.p-14 { padding: var(--space-14); }
.p-16 { padding: var(--space-16); }
.p-20 { padding: var(--space-20); }
.p-24 { padding: var(--space-24); }
.p-28 { padding: var(--space-28); }
.p-32 { padding: var(--space-32); }
.p-36 { padding: var(--space-36); }
.p-40 { padding: var(--space-40); }

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

/* Width/Height utilities */
.w-0 { width: 0%; }
.w-1 { width: 1%; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-33 { width: 33.3333%; }
.w-50 { width: 50%; }
.w-75 { width: 75%; }
.w-100 { width: 100%; }

.h-0 { height: 0px; }
.h-1 { height: var(--space-1); }
.h-2 { height: var(--space-2); }
.h-4 { height: var(--space-4); }
.h-8 { height: var(--space-8); }
.h-16 { height: var(--space-16); }
.h-full { height: 100%; }

/* Flex utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-row { flex-direction: row; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }
.flex-1 { flex: 1 1 0%; }
.flex-auto { flex: 1 1 auto; }
.flex-none { flex: 0 0 auto; }
.gap-0 { gap: var(--space-0); }
.gap-05 { gap: var(--space-05); }
.gap-1 { gap: var(--space-1); }
.gap-15 { gap: var(--space-15); }
.gap-2 { gap: var(--space-2); }
.gap-25 { gap: var(--space-25); }
.gap-3 { gap: var(--space-3); }
.gap-35 { gap: var(--space-35); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }
.gap-8 { gap: var(--space-8); }
.gap-9 { gap: var(--space-9); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }
.gap-16 { gap: var(--space-16); }

/* Grid utilities */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Transition utilities */
.transition-none { transition-property: none; }
.transition-all { transition-property: all; transition-timing-function: var(--ease-in-out); transition-duration: var(--duration-150); }
.transition-colors { transition-property: background-color, border-color, color, fill, stroke; transition-timing-function: var(--ease-in-out); transition-duration: var(--duration-150); }
.transition-opacity { transition-property: opacity; transition-timing-function: var(--ease-in-out); transition-duration: var(--duration-150); }
.transition-shadow { transition-property: box-shadow; transition-timing-function: var(--ease-in-out); transition-duration: var(--duration-150); }
.transition-transform { transition-property: transform; transition-timing-function: var(--ease-in-out); transition-duration: var(--duration-150); }

.duration-75 { transition-duration: var(--duration-75); }
.duration-100 { transition-duration: var(--duration-100); }
.duration-150 { transition-duration: var(--duration-150); }
.duration-200 { transition-duration: var(--duration-200); }
.duration-300 { transition-duration: var(--duration-300); }
.duration-500 { transition-duration: var(--duration-500); }
.duration-700 { transition-duration: var(--duration-700); }
.duration-1000 { transition-duration: var(--duration-1000); }

.ease-linear { transition-timing-function: var(--ease-linear); }
.ease-in { transition-timing-function: var(--ease-in); }
.ease-out { transition-timing-function: var(--ease-out); }
.ease-in-out { transition-timing-function: var(--ease-in-out); }

/* Opacity utilities */
.opacity-0 { opacity: 0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }
.opacity-100 { opacity: 1; }

/* Blur utilities */
.blur { filter: blur(8px); }
.blur-sm { filter: blur(4px); }
.blur-md { filter: blur(12px); }
.blur-lg { filter: blur(16px); }
.blur-xl { filter: blur(24px); }
.blur-2xl { filter: blur(40px); }
.blur-3xl { filter: blur(64px); }

/* Backdrop blur */
.backdrop-blur { backdrop-filter: blur(8px); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); }
.backdrop-blur-lg { backdrop-filter: blur(16px); }
.backdrop-blur-xl { backdrop-filter: blur(24px); }