@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

/*
 * Dark mode maps the app's existing light design tokens onto one shared dark
 * palette. Keeping the mapping here lets marketing and product surfaces stay
 * visually consistent without coupling theme state to server-rendered views.
 */
:root {
  color-scheme: light;
  --font-heading: "Rubik", ui-sans-serif, system-ui, sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --otm-canvas: #f7f8fb;
  --otm-surface: #ffffff;
  --otm-subtle: #f1f3f7;
  --otm-header: rgba(247, 248, 251, 0.92);
  --otm-ink: #11182b;
  --otm-body: #59647a;
  --otm-muted: #687187;
  --otm-faint: #687187;
  --otm-rule: #dde2ea;
  --otm-control-rule: #cfd7e5;
  --otm-control-hover: #aeb9ca;
  --otm-grid: rgba(17, 24, 43, 0.045);
  --otm-signal: #2f68f3;
  --otm-signal-hover: #1e54da;
  --otm-signal-soft: #edf2ff;
  --otm-violet: #725efe;
  --otm-teal: #0fbd9e;
  --otm-teal-soft: #e8f7f1;
  --otm-amber: #ffb724;
  --otm-amber-soft: #fff3df;
  --otm-coral: #e87052;
  --otm-inverse: #11182b;
  --otm-inverse-ink: #ffffff;
  --otm-inverse-body: #b8c3d8;
  --otm-inverse-rule: rgba(255, 255, 255, 0.16);
}

:root.dark {
  color-scheme: dark;
  --otm-canvas: #0b0d14;
  --otm-surface: #151925;
  --otm-subtle: #10141e;
  --otm-header: rgba(11, 13, 20, 0.9);
  --otm-ink: #eef1f7;
  --otm-body: #b8c1d1;
  --otm-muted: #a3aec0;
  --otm-faint: #8995a9;
  --otm-rule: #242b3a;
  --otm-control-rule: #343d50;
  --otm-control-hover: #536078;
  --otm-grid: rgba(173, 185, 210, 0.07);
  --otm-signal: #7aa2ff;
  --otm-signal-hover: #9ab8ff;
  --otm-signal-soft: #182840;
  --otm-violet: #a99cff;
  --otm-teal: #64d6b5;
  --otm-teal-soft: #102a25;
  --otm-amber: #f3bc62;
  --otm-amber-soft: #302512;
  --otm-coral: #f08c84;
  --otm-inverse: #080b12;
  --otm-inverse-ink: #f6f8fc;
  --otm-inverse-body: #b8c3d8;
  --otm-inverse-rule: rgba(255, 255, 255, 0.14);
}

html,
body {
  background: var(--otm-canvas);
}

body {
  font-family: var(--font-body);
}

html.dark,
html.dark body {
  background: #0b0d14;
}

::selection {
  background: rgba(47, 104, 243, 0.22);
  color: currentColor;
}

.marketing-shell :where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--otm-signal);
  outline-offset: 3px;
}

.marketing-header-scrolled {
  border-bottom: 1px solid var(--otm-rule);
  background: var(--otm-header);
}

.dark .marketing-monochrome-icon {
  filter: invert(1) brightness(1.35);
}

:where(h1, h2, h3, h4, h5, h6),
.font-heading {
  font-family: var(--font-heading);
}

/* Page canvases */
.dark :where([class~="bg-[#fcfcfe]"]) { background-color: #0b0d14 !important; }
.dark :where([class~="bg-[#f3f5f9]"], [class~="bg-[#f4f6fa]"], [class~="bg-[#f5f6fa]"]) { background-color: #0d1018 !important; }
.dark :where([class~="bg-[#f7f8fa]"], [class~="bg-[#f7f8fb]"], [class~="bg-[#f7f9ff]"], [class~="bg-[#f8f9fb]"], [class~="bg-[#f8f9fc]"], [class~="bg-[#f9faff]"], [class~="bg-[#fafbfc]"], [class~="bg-[#fbfcfd]"], [class~="bg-[#fcfaf9]"]) { background-color: #111520 !important; }
.dark :where([class~="bg-white"]) { background-color: #151925 !important; }
.dark :where([class~="bg-[rgba(255,255,255,0.78)]"], [class~="bg-[rgba(255,255,255,0.94)]"], [class~="bg-[rgba(255,255,255,0.96)]"], [class~="bg-[rgba(252,252,254,0.9)]"], [class~="bg-[rgba(249,250,255,0.86)]"]) { background-color: rgba(15, 18, 28, 0.9) !important; }
.dark :where([class~="bg-[#11182b]"]) { background-color: #20263a !important; }
.dark :where([class~="bg-[#172139]"]) { background-color: #1c2540 !important; }

/* Quiet elevated and selected surfaces */
.dark :where([class~="bg-[#eceff3]"], [class~="bg-[#f0f2f6]"], [class~="bg-[#f0f2f7]"], [class~="bg-[#f0f3f8]"], [class~="bg-[#f1f3f6]"], [class~="bg-[#f1f3f7]"], [class~="bg-[#f2f4f8]"]) { background-color: #1b202c !important; }
.dark :where([class~="bg-[#edf2ff]"], [class~="bg-[#eeeaff]"], [class~="bg-[#f3f6ff]"], [class~="bg-[#f8f7ff]"]) { background-color: #211d3d !important; }
.dark :where([class~="bg-[#e7f8f2]"], [class~="bg-[#e8f7ef]"], [class~="bg-[#e8f8f3]"], [class~="bg-[#edfaf6]"], [class~="bg-[#f2fbf7]"], [class~="bg-[#f6faf8]"], [class~="bg-[#f8fcfa]"]) { background-color: #102a25 !important; }
.dark :where([class~="bg-[#fff0d2]"], [class~="bg-[#fff3df]"]) { background-color: #302512 !important; }
.dark :where([class~="bg-[#fff0ee]"], [class~="bg-[#fff2f0]"], [class~="bg-[#fff4f1]"], [class~="bg-[#fff7f5]"], [class~="bg-[#fff7f8]"], [class~="bg-[#fff8f7]"]) { background-color: #301b1f !important; }
.dark :where([class~="bg-[#cfd5df]"], [class~="bg-[#dfe3ea]"], [class~="bg-[#e0e4eb]"], [class~="bg-[#e3e6ed]"]) { background-color: #202634 !important; }
.dark :where([class~="bg-[#147255]"]) { background-color: #197a5c !important; }
.dark :where([class~="hover:bg-[#105d46]"]):hover { background-color: #208d6a !important; }

/* Provider/category/status tints */
.dark :where([class~="bg-[#e7f8f3]"], [class~="bg-[#e8f7f1]"], [class~="bg-[#f2faf7]"]) { background-color: #102a25 !important; }
.dark :where([class~="bg-[#e9f3ff]"]) { background-color: #182840 !important; }
.dark :where([class~="bg-[#f0edff]"], [class~="bg-[#eeeeff]"], [class~="bg-[#f7f6ff]"]) { background-color: #211d3d !important; }
.dark :where([class~="bg-[#fff0f6]"]) { background-color: #321a28 !important; }
.dark :where([class~="bg-[#f0f2f5]"], [class~="bg-[#f2f4f7]"]) { background-color: #1b202c !important; }
.dark :where([class~="bg-[#fff1ee]"], [class~="bg-[#fff5f2]"]) { background-color: #301b1f !important; }
.dark :where([class~="bg-[#fff5dd]"]) { background-color: #302512 !important; }

/* Decorative backgrounds */
.dark :where([class~="bg-[linear-gradient(135deg,#f5f3ff,#faf9ff)]"]) { background-image: linear-gradient(135deg, #19162b, #111520) !important; }
.dark :where([class~="bg-[linear-gradient(rgba(47,104,243,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(47,104,243,0.05)_1px,transparent_1px)]"]) { background-image: linear-gradient(rgba(122,162,255,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(122,162,255,0.08) 1px, transparent 1px) !important; }
.dark :where([class~="bg-[radial-gradient(circle,rgba(47,104,243,0.14)_1px,transparent_1px)]"]) { background-image: radial-gradient(circle, rgba(122,162,255,0.18) 1px, transparent 1px) !important; }
.dark :where([class~="before:bg-[rgba(252,252,254,0.9)]"])::before { background-color: rgba(11, 13, 20, 0.9) !important; }
.dark :where([class~="before:bg-[rgba(249,250,255,0.86)]"])::before { background-color: rgba(13, 16, 24, 0.9) !important; }
.dark :where([class~="before:bg-[#cfd5df]"])::before { background-color: #202634 !important; }
.dark :where([class~="before:bg-white"])::before { background-color: #151925 !important; }
.dark :where([class~="before:border-[#cbd1dc]"])::before { border-color: #202634 !important; }
.dark #for-you { background-color: #0f1422 !important; }

/* Type hierarchy */
.dark :where([class~="text-[#11182b]"], [class~="text-[#182036]"], [class~="text-[#20283b]"], [class~="text-[#30394f]"], [class~="text-[#343d52]"], [class~="text-[#394258]"], [class~="text-[#3b4458]"], [class~="text-[#3c455a]"], [class~="text-[#3d465b]"], [class~="text-[#3f485d]"]) { color: #eef1f7 !important; }
.dark :where([class~="text-[#4f5a70]"], [class~="text-[#536078]"], [class~="text-[#556076]"], [class~="text-[#566075]"], [class~="text-[#59647a]"], [class~="text-[#5f697d]"], [class~="text-[#5f697e]"], [class~="text-[#626c80]"], [class~="text-[#626c82]"], [class~="text-[#647086]"], [class~="text-[#667086]"], [class~="text-[#677186]"], [class~="text-[#687187]"], [class~="text-[#687287]"], [class~="text-[#69748a]"], [class~="text-[#6e7890]"], [class~="text-[#6f7c96]"], [class~="text-[#727c91]"], [class~="text-[#737d91]"], [class~="text-[#748096]"], [class~="text-[#778196]"], [class~="text-[#7a8499]"], [class~="text-[#7b8498]"], [class~="text-[#7c8597]"], [class~="text-[#7c8598]"], [class~="text-[#7d879a]"], [class~="text-[#7e8799]"]) { color: #aeb7c8 !important; }
.dark :where([class~="text-[#818a9d]"], [class~="text-[#858ea0]"], [class~="text-[#8a93a6]"], [class~="text-[#8b94a6]"], [class~="text-[#8c95a6]"], [class~="text-[#8f98a9]"], [class~="text-[#9098a8]"], [class~="text-[#929aac]"], [class~="text-[#939bab]"], [class~="text-[#949dae]"], [class~="text-[#969eae]"], [class~="text-[#9aa2b0]"], [class~="text-[#9aa3b4]"], [class~="text-[#9ba3b2]"], [class~="text-[#a0a7b5]"], [class~="text-[#a0a8b7]"]) { color: #8e99ad !important; }
.dark :where([class~="text-[#2f68f3]"]) { color: #7aa2ff !important; }
.dark :where([class~="text-[#654df0]"], [class~="text-[#624bdc]"], [class~="text-[#725efe]"], [class~="text-[#5542bf]"], [class~="text-[#403482]"]) { color: #a99cff !important; }
.dark :where([class~="text-[#08785d]"], [class~="text-[#0b806d]"], [class~="text-[#147255]"], [class~="text-[#168264]"], [class~="text-[#178264]"], [class~="text-[#19714f]"], [class~="text-[#2b9a79]"]) { color: #64d6b5 !important; }
.dark :where([class~="text-[#13735b]"], [class~="text-[#167961]"], [class~="text-[#19735c]"]) { color: #64d6b5 !important; }
.dark :where([class~="text-[#2563c9]"]) { color: #7aa2ff !important; }
.dark :where([class~="text-[#5c57cc]"], [class~="text-[#6857c7]"], [class~="text-[#7b8496]"]) { color: #a99cff !important; }
.dark :where([class~="text-[#916211]"]) { color: #f3bc62 !important; }
.dark :where([class~="text-[#b52d66]"], [class~="text-[#c54b3f]"]) { color: #f08c84 !important; }
.dark :where([class~="text-[#657c74]"], [class~="text-[#6f9185]"]) { color: #8fc7b4 !important; }
.dark :where([class~="text-[#9a7130]"], [class~="text-[#a6660d]"], [class~="text-[#a66a14]"], [class~="text-[#b7791f]"]) { color: #f3bc62 !important; }
.dark :where([class~="text-[#78515a]"], [class~="text-[#8b6470]"], [class~="text-[#a33d55]"], [class~="text-[#a94331]"], [class~="text-[#ad493c]"], [class~="text-[#b64235]"], [class~="text-[#c34f43]"]) { color: #f08c84 !important; }

/* Dense dashboard metadata stays readable at its intentionally compact sizes. */
.dashboard-shell :where([class~="text-[#818a9d]"], [class~="text-[#858ea0]"], [class~="text-[#8a93a6]"], [class~="text-[#8b94a6]"], [class~="text-[#929aac]"], [class~="text-[#949dae]"], [class~="text-[#9aa3b4]"]) {
  color: var(--otm-muted) !important;
}

/* Dividers and controls */
.dark :where([class~="border-white"], [class~="border-[#cbd1dc]"], [class~="border-[#cfd7e5]"], [class~="border-[#d6dce6]"], [class~="border-[#d7dce5]"], [class~="border-[#d8dde6]"], [class~="border-[#dce1e9]"], [class~="border-[#dde1e9]"], [class~="border-[#dde2ea]"], [class~="border-[#dfe3ea]"], [class~="border-[#e0e4eb]"], [class~="border-[#e1e5ec]"], [class~="border-[#e2e6ec]"], [class~="border-[#e2e6ed]"], [class~="border-[#e3e6ed]"], [class~="border-[#e4e7ed]"], [class~="border-[#e5e8ee]"], [class~="border-[#e7e9ee]"], [class~="border-[#e8eaf0]"], [class~="border-[#eceef2]"], [class~="border-[#edf0f3]"], [class~="border-[#fafbfc]"]) { border-color: #202634 !important; }
.dark :where([class~="xl:border-[#e1e5ec]"], [class~="lg:border-[#e3e6ed]"]) { border-color: #202634 !important; }
.dark :where([class~="border-[#d7d1ff]"], [class~="border-[#d8d2ff]"], [class~="border-[#ded9ff]"]) { border-color: #443b70 !important; }
.dark :where([class~="border-[#a6dfcf]"], [class~="border-[#b9dfd2]"], [class~="border-[#c8ddd5]"], [class~="border-[#cce5dc]"], [class~="border-[#cee2db]"]) { border-color: #286b5c !important; }
.dark :where([class~="border-[#d6e5df]"], [class~="border-[#dce9e4]"], [class~="border-[#dfece7]"]) { border-color: #273b38 !important; }
.dark :where([class~="hover:border-[#82c8b0]"]):hover { border-color: #3b8b73 !important; }
.dark :where([class~="border-[#f0b7ad]"], [class~="border-[#e3c9ce]"], [class~="border-[#f1d6d1]"], [class~="border-[#f2d0ca]"]) { border-color: #754149 !important; }
.dark :where([class~="border-[#e6dedc]"], [class~="border-[#eee5e3]"]) { border-color: #202634 !important; }
.dark :where([class~="border-[#f0c7c0]"]) { border-color: #4b3036 !important; }
.dark :where([class~="border-[#dfe8e4]"], [class~="border-[#e1e3ef]"], [class~="border-[#f0d5cf]"]) { border-color: #273344 !important; }
.dark :where([class~="border-[rgba(17,24,43,0.045)]"]) { border-color: rgba(173, 185, 210, 0.1) !important; }
.dark :where([class~="divide-[#e7e9ee]"]) > :not(:last-child) { border-color: #181e2a !important; }

.dark :where(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), textarea, select) {
  background-color: #10141e !important;
  color: #eef1f7 !important;
}

.dark :where(input, textarea)::placeholder { color: #707b90 !important; }
.dark :where([class~="hover:bg-white"], [class~="hover:bg-[#f0f2f6]"], [class~="hover:bg-[#f0f2f7]"], [class~="hover:bg-[#f0f3f8]"], [class~="hover:bg-[#f2f4f8]"], [class~="hover:bg-[#f7f9ff]"], [class~="hover:bg-[#f8f9fc]"], [class~="hover:bg-[#fafbfc]"]):hover { background-color: #1b2130 !important; }
.dark :where([class~="hover:bg-[#fff2f0]"], [class~="hover:bg-[#fff7f8]"]):hover { background-color: #29191d !important; }
.dark :where([class~="aria-expanded:bg-[#f0f3f8]"])[aria-expanded="true"] { background-color: #1b2130 !important; }
.dark :where([class~="group/node"]):hover :where([class~="group-hover/node:bg-[#f3f6ff]"]) { background-color: #211d3d !important; }
.dark :where([class~="hover:text-[#20283b]"], [class~="hover:text-[#30394f]"]):hover { color: #ffffff !important; }
.dark :where([class*="shadow-[0_"]) { --tw-shadow-color: rgba(0, 0, 0, 0.42); }
.dark :where([class~="shadow-[0_0_0_8px_#edf2ff]"], [class~="shadow-[0_0_0_8px_#f0edff]"]) { box-shadow: 0 0 0 8px #211d3d !important; }
.dark :where([class~="shadow-[0_0_0_8px_#e5fbf6]"]) { box-shadow: 0 0 0 8px #102a25 !important; }
.dark :where(.group):hover :where([class~="group-hover:shadow-[0_0_0_11px_#edf2ff]"], [class~="group-hover:shadow-[0_0_0_11px_#f0edff]"]) { box-shadow: 0 0 0 11px #211d3d !important; }
.dark :where(.group):hover :where([class~="group-hover:shadow-[0_0_0_11px_#e5fbf6]"]) { box-shadow: 0 0 0 11px #102a25 !important; }

.dark img[src*="/github-"],
.dark img[src*="/linear-"] {
  filter: invert(1) brightness(1.15);
}

.dark .brand-wordmark {
  filter: brightness(0) invert(1);
}

.dark #account-menu {
  border-color: #202634 !important;
  background-color: #0d111a !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.55);
}


@keyframes brand-signal-arrival {
  0%, 55%, 100% { opacity: 0.45; transform: translateY(0); }
  12% { opacity: 1; transform: translateY(-2px); }
  24% { opacity: 0.75; transform: translateY(0); }
}

@keyframes routing-slip-arrival {
  0% {
    clip-path: inset(0 100% 0 0);
    filter: blur(2px);
    transform: translateX(-14px);
  }
  68% {
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    transform: translateX(2px);
  }
  100% {
    clip-path: inset(0 0 0 0);
    filter: blur(0);
    transform: translateX(0);
  }
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes float-slow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(20px, -30px) scale(1.05); }
  50% { transform: translate(-10px, -50px) scale(0.95); }
  75% { transform: translate(-30px, -20px) scale(1.02); }
}

@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-signal {
    animation: brand-signal-arrival 3.6s ease-in-out infinite;
  }

  .otm-motion-ready .routing-slip {
    animation: routing-slip-arrival 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
  }

  .otm-motion-ready .routing-slip:nth-child(2) {
    animation-delay: 110ms;
  }

  .otm-motion-ready .routing-slip:nth-child(3) {
    animation-delay: 220ms;
  }
}

.settings-section-nav {
  scrollbar-width: none;
}

.settings-section-nav::-webkit-scrollbar {
  display: none;
}