dalcode-website/app/globals.css

@import "tailwindcss";

/* Webflow base resets are in webflow.css */

/* Dark mode: override Webflow CSS variables */
.dark {
  --core--colors--neutral--800: #f5f5f5;
  --core--colors--neutral--700: #e0e0e0;
  --core--colors--neutral--600: #a0a0a0;
  --core--colors--neutral--500: #707070;
  --core--colors--neutral--400: #2a2a2a;
  --core--colors--neutral--300: #1e1e1e;
  --core--colors--neutral--200: #161616;
  --core--colors--neutral--100: #0d0d0d;
  --font--colors--title: var(--core--colors--neutral--800);
  --font--colors--paragraph: var(--core--colors--neutral--600);
  --font--colors--title-dm: #f5f5f5;
  --font--colors--paragraph-dm: #b0b0b0;
}

.dark body,
.dark .page-wrapper {
  background-color: #0d0d0d;
  color: #e0e0e0;
}

.dark .section-small,
.dark .section,
.dark .hero-v1-grid-wrapper,
.dark .cta-section:not(.v4) {
  background-color: #0d0d0d;
}

.dark .border-wrapper,
.dark .corner-gradient-container:not(.row) {
  background-color: #141414;
}

.dark .input:not(.dark-mode) {
  background-color: #1a1a1a;
  border-color: #2a2a2a;
  color: #e0e0e0;
}

.dark .input:not(.dark-mode)::placeholder {
  color: #666;
}

/* Header */
.dark .header-wrapper,
.dark .header-wrapper---absolute {
  background-color: rgba(13, 13, 13, 0.9);
  backdrop-filter: blur(12px);
}

.dark .w-nav-link,
.dark .w-dropdown-btn,
.dark .w-dropdown-toggle,
.dark .w-dropdown-link {
  color: #e0e0e0;
}

.dark .link .link-text {
  color: #d0d0d0;
}

/* Footer */
.dark .footer-wrapper {
  background-color: #0a0a0a;
}

.dark .footer-link {
  color: #b0b0b0;
  border-bottom-color: #2a2a2a;
}

.dark .footer-link:hover {
  color: #f5f5f5;
}

.dark .footer-top,
.dark .footer-middle,
.dark .footer-links-wrapper,
.dark .footer-bottom {
  border-color: #2a2a2a;
}

.dark .footer-logo-wrapper {
  border-color: #2a2a2a;
}

.dark .footer-button {
  border-color: #2a2a2a;
  color: #f5f5f5;
}

.dark .footer-link-bg {
  background-color: #2a2a2a;
}

.dark .footer-contact-link-icon-wrapper {
  border-color: #2a2a2a;
}

.dark .footer-contact-link-bg {
  background-color: #1e1e1e;
}

.dark .text-color-neutral-400 {
  color: #707070;
}

.dark .icon-40px---dark-mode {
  background-color: #1e1e1e;
  color: #f5f5f5;
}

.dark .link-square-icon-left---dark-mode {
  color: #f5f5f5;
}

.dark .text-link {
  color: #f5f5f5;
}

.dark .text-link:hover {
  color: #a0a0a0;
}

/* Cards */
.dark .card {
  background-color: #141414;
  border-color: #2a2a2a;
}

.dark .card.contact-card-v1 {
  border-color: #2a2a2a;
}

.dark .contact-link-text {
  color: var(--font--colors--title) !important;
}

.dark .contact-card-link-bg {
  background-color: #2a2a2a;
}

.dark .contact-card-v1-link-wrapper {
  border-color: #2a2a2a;
}

/* CTA sections */
.dark .cta-section {
  background-color: #0d0d0d;
}

/* Tab links */
.dark .w-tab-link {
  color: #e0e0e0;
  background-color: #1e1e1e;
}

.dark .w-tab-link.w--current {
  background-color: #2a2a2a;
}

/* Section backgrounds */
.dark .section.bg-neutral,
.dark .section-small.bg-neutral {
  background-color: #111;
}

.dark .bg-neutral-100 {
  background-color: #0d0d0d;
}

.dark .bg-neutral-200 {
  background-color: #141414;
}

.dark .bg-neutral-300 {
  background-color: #1a1a1a;
}

/* Accordion & misc cards */
.dark .card.accordion-card-v1,
.dark .card.accordion-card-v2,
.dark .card.accordin-card-v3 {
  background-color: #141414;
}

.dark .card.accordion-card-v2:hover,
.dark .card.accordin-card-v3:hover {
  background-color: #1e1e1e;
}

/* Blog cards */
.dark .blog-card-v1 {
  border-color: #2a2a2a;
}

/* Blockquote */
.dark blockquote {
  background-color: #1e1e1e;
  color: #f5f5f5;
}

/* Notification bar */
.dark .notification-bar {
  background-color: #1e1e1e;
  color: #f5f5f5;
}

/* Primary button in dark sections */
.dark .primary-button {
  border-color: #2a2a2a;
}

/* Badge */
.dark .badge {
  background-color: #1e1e1e;
}

/* SVG icons inherit currentColor — ensure parent elements are visible */
.dark .footer-link-icon {
  color: #707070;
}

/* Contact page hover backgrounds */
.dark .contact-icon-bg {
  background-color: #2a2a2a;
}

.dark .contact-card-link-bg {
  background-color: #2a2a2a;
}

/* Dropdown menu */
.dark .w-dropdown-list {
  background-color: #1e1e1e;
}

.dark [data-nav-menu-open] {
  background-color: #1e1e1e;
}

/* Gradient overlays — use dark base */
.dark .hero-v1-bg-gradient,
.dark .about-section-gradient {
  background-image: none;
}

/* Show/hide elements based on theme */
.show-dark-mode {
  display: none;
}

.dark .show-dark-mode {
  display: block;
}

.dark .show-light-mode {
  display: none;
}

/* Theme toggle button */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--core--colors--neutral--400);
  background: transparent;
  cursor: pointer;
  color: var(--core--colors--neutral--700);
  transition: background-color 0.2s, color 0.2s;
}

.theme-toggle:hover {
  background-color: var(--core--colors--neutral--300);
}