/* Beatnik custom overrides & utilities */
:root {
  --color-primary:#073B4C;
  --color-secondary:#FFD166;
  --color-accent1:#FF6B6B;
  --color-accent2:#06D6A0; /* legacy vibrant green */
  --color-accent3:#118AB2;
  /* Softer dark mode adaptive palette */
  --dm-surface:#0f1820;
  --dm-surface-alt:#16232c;
  --dm-accent:#3AAFA9; /* soft teal */
  --dm-accent-hover:#2B8F8A; /* deeper teal */
  --dm-accent-fade:rgba(58,175,169,0.18);
}
html { scroll-behavior:smooth; }
body.dark { background:var(--dm-surface); color:#f1f5f9; }
/* Smooth theme transitions */
body, header.site-header, footer, .bg-white, .shadow-brand, input, textarea, select { transition: background-color .4s ease, color .4s ease, border-color .4s ease; }
/* Tri-state theme control */
.theme-segment { display:inline-flex; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.25); border-radius:9999px; overflow:hidden; }
.theme-segment button { position:relative; appearance:none; background:transparent; border:0; color:#fff; font-size:11px; font-weight:600; letter-spacing:.5px; padding:4px 10px; cursor:pointer; display:inline-flex; align-items:center; gap:4px; }
.theme-segment button svg { width:14px; height:14px; }
.theme-segment button.active { color:#073B4C; }
.theme-segment button:focus-visible { outline:2px solid #FFD166; outline-offset:2px; }
.theme-segment-indicator { position:absolute; inset:2px; background:#FFD166; border-radius:9999px; z-index:0; transition:transform .35s ease; }
.theme-segment button span { position:relative; z-index:1; display:inline-flex; align-items:center; gap:4px; }
.theme-segment[data-mode='light'] .theme-segment-indicator { transform:translateX(0%); width:calc(33.333% - 4px); }
.theme-segment[data-mode='dark'] .theme-segment-indicator { transform:translateX(100%); width:calc(33.333% - 4px); }
.theme-segment[data-mode='system'] .theme-segment-indicator { transform:translateX(200%); width:calc(33.333% - 4px); }
.dark .theme-segment { background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.2); }
.dark .theme-segment button.active { color:#073B4C; }
.dark .text-gradient { background:linear-gradient(90deg,#FFD166,#FF6B6B,#06D6A0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.dark header.site-header { background:linear-gradient(135deg,#0e242d,#0d2933 55%,#103341) !important; }
.dark a { color:#FFD166; }
.dark a:hover { color:#FF6B6B; }
.dark .shadow-brand, .dark .bg-white { background:var(--dm-surface-alt) !important; color:#e2e8f0; }
.dark .bg-white p, .dark .bg-white li { color:#cbd5e1; }
.dark h1, .dark h2, .dark h3, .dark h4 { color:#f8fafc; }
.dark .text-gray-600 { color:#94a3b8 !important; }
.dark .text-gray-500 { color:#64748b !important; }
.dark [class*='text-\[#073B4C\]'] { color:#e2f3f7 !important; }
.dark [class*='text-\[#118AB2\]'] { color:#7dd3fc !important; }
.dark [class*='text-\[#FF6B6B\]'] { color:#ff9999 !important; }
.dark [class*='text-\[#06D6A0\]'] { color:#4ade80 !important; }
.dark [class*='text-\[#FFD166\]'] { color:#fde68a !important; }
.dark footer { background:linear-gradient(180deg,#0d2933,#0c252e) !important; }
.dark .flow-arrow { border-color:#334155; }
.dark input, .dark textarea, .dark select { background:#18252e; border-color:#2c3b45; color:#e2e8f0; box-shadow:0 1px 0 0 rgba(255,255,255,0.04) inset; }
.dark input:hover, .dark textarea:hover, .dark select:hover { border-color:#3a4c57; }
.dark input:focus, .dark textarea:focus, .dark select:focus { outline:2px solid var(--dm-accent); outline-offset:2px; border-color:var(--dm-accent); }
/* Softer primary surfaces + hover in dark mode */
.dark [class*='bg-\[#073B4C\]'] { background:#10323b !important; position:relative; transition:box-shadow .35s ease, filter .4s ease; }
.dark [class*='bg-\[#073B4C\]']::after { content:""; position:absolute; inset:0; background:rgba(255,255,255,0); mix-blend-mode:overlay; pointer-events:none; transition:background .4s ease; border-radius:inherit; }
.dark [class*='bg-\[#073B4C\]']:hover { filter:brightness(1.07); box-shadow:0 4px 18px -6px rgba(0,0,0,.55); }
.dark [class*='bg-\[#073B4C\]']:hover::after { background:rgba(255,255,255,0.05); }
.dark [class*='bg-\[#073B4C\]'].card-hover:hover { box-shadow:0 10px 26px -8px rgba(0,0,0,.6); }
.dark a { color:var(--color-secondary); }
.dark a:hover { color:var(--color-accent1); text-shadow:0 0 6px rgba(255,107,107,0.25); }
/* ---------------- Buttons (dark mode refinement) ---------------- */
/* Target common Tailwind utility bg color buttons and generic button tags that are not links */
.dark button,
.dark .btn,
.dark [class*='bg-\[#118AB2\]'], /* accent3 */
.dark [class*='bg-\[#06D6A0\]'], /* accent2 legacy */
.dark [class*='bg-\[#FF6B6B\]'], /* accent1 */
.dark [class*='bg-\[#FFD166\]']  /* secondary */ {
  position:relative;
  transition:filter .35s ease, box-shadow .35s ease, transform .25s ease;
}
.dark button:not(:disabled):hover,
.dark .btn:not(:disabled):hover,
.dark [class*='bg-\[#118AB2\]']:hover,
.dark [class*='bg-\[#06D6A0\]']:hover,
.dark [class*='bg-\[#FF6B6B\]']:hover,
.dark [class*='bg-\[#FFD166\]']:hover {
  filter:brightness(1.08);
  box-shadow:0 4px 14px -4px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,0.05);
}
/* Pressed / active (mouse down) */
.dark button:not(:disabled):active,
.dark .btn:not(:disabled):active,
.dark [class*='bg-\[#118AB2\]']:active,
.dark [class*='bg-\[#06D6A0\]']:active,
.dark [class*='bg-\[#FF6B6B\]']:active,
.dark [class*='bg-\[#FFD166\]']:active {
  filter:brightness(0.94) saturate(1.05);
  transform:translateY(1px);
  box-shadow:0 2px 8px -2px rgba(0,0,0,.55) inset,0 0 0 1px rgba(255,255,255,0.04);
}
/* Focus ring: unify */
.dark button:focus-visible,
.dark .btn:focus-visible,
.dark [class*='bg-\[#118AB2\]']:focus-visible,
.dark [class*='bg-\[#06D6A0\]']:focus-visible,
.dark [class*='bg-\[#FF6B6B\]']:focus-visible,
.dark [class*='bg-\[#FFD166\]']:focus-visible {
  outline:2px solid var(--dm-accent);
  outline-offset:2px;
}
/* Disabled state subtle flatten */
.dark button:disabled,
.dark .btn:disabled { opacity:.55; filter:none; box-shadow:none; cursor:not-allowed; }
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .dark button, .dark .btn, .dark [class*='bg-\\[#118AB2\\]'], .dark [class*='bg-\\[#06D6A0\\]'], .dark [class*='bg-\\[#FF6B6B\\]'], .dark [class*='bg-\\[#FFD166\\]'] { transition:none; }
}
.theme-toggle-btn { cursor:pointer; }
.dark .theme-toggle-icon-sun { display:none; }
body:not(.dark) .theme-toggle-icon-moon { display:none; }
.gradient-hero { background: radial-gradient(circle at 30% 30%, #118AB2 0%, #073B4C 60%, #02161d 100%); }
.text-gradient { background:linear-gradient(90deg,#FFD166,#FF6B6B,#06D6A0); -webkit-background-clip:text; background-clip:text; color:transparent; }
.shadow-brand { box-shadow:0 4px 20px -2px rgba(7,59,76,0.35),0 2px 6px -1px rgba(0,0,0,0.2); }
nav .active-link { color: var(--color-secondary); font-weight:700; }
/* simple fade-in */
.fade-in { opacity:0; transform:translateY(12px); animation:fadeIn .7s ease forwards; }
@keyframes fadeIn { to { opacity:1; transform:translateY(0); } }
/* Card hover */
.card-hover { transition:transform .25s, box-shadow .25s; }
.card-hover:hover { transform:translateY(-4px); box-shadow:0 8px 28px -6px rgba(7,59,76,.35); }
/* Mobile nav */
.mobile-nav-hidden { display:none; }
@media (max-width: 768px){
  #mobileNav.menu-open { display:block; }
}
/* Unified hero typography (manual since no Tailwind build step) */
.page-hero-title { font-weight:900; letter-spacing:-0.025em; }
.page-hero-subtitle { font-size:1.125rem; font-weight:500; color:#118AB2; }
@media (min-width:768px){
  .page-hero-subtitle { font-size:1.25rem; }
}