/* =====================================================
   GLOBAL THEME TOKENS (CONTROL ALL COLORS FROM HERE)
   Do NOT remove — used by DaisyUI + custom components
===================================================== */

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

section {
  margin-bottom: 3rem;
}

/* Prevent Tailwind grays from breaking theme */
.text-gray-500,
.text-gray-600,
.text-gray-700 {
  color: var(--text-muted);
}

.text-gray-900,
.text-gray-800 {
  color: var(--text-main);
}

:root {
  /* Backgrounds */
  --bg-main: #ffffff;
  --bg-secondary: #f9fafb;

  /* Text */
  --text-main: #0f172a;
  --text-muted: #6b7280;
  --text-invert: #ffffff;

  /* Cards / Panels */
  --card-bg: rgba(255, 255, 255, 0.96);
  --card-border: rgba(0, 0, 0, 0.08);

  /* Brand / Accent */
  /* --primary: #06b6d4; */
  --primary: #4f46e5;
  /* --primary-rgb: 6, 182, 212; */
  /* --primary-hover: #0891b2; */
  --primary-hover: #4338ca;
  /* --primary-soft: rgba(6, 182, 212, 0.15); */

  /* Borders & Shadows */
  --border-soft: rgba(0, 0, 0, 0.06);
  --shadow-soft: 0 10px 25px rgba(0, 0, 0, 0.08);

  /* Responsive Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* Typography - Mobile First */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;

}

/* Base reset + sensible defaults */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(14px, 1.6vw, 16px);
  line-height: 1.6;
  background: var(--bg-main);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;    
}

/* Container to center page content */
.container {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

h1, h2, h3 {
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-main);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1rem; }

p, span, li {
  color: var(--text-muted);
}

/* Accessible button base */
@media (hover: hover) {
  .btn:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.12); }
}

/* Form controls */
input, textarea, select {
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: white;
  color: black;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.06);
  outline: none;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .calc-block, .card, .btn { transition: none !important; transform: none !important; }
}

/* =====================================================
   DARK THEME TOKENS (EXCLUDING NAVBAR)
===================================================== */

html[data-theme="synthwave"] {
  --bg-main: #0f172a;
  --bg-secondary: #020617;

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;
  --text-invert: #020617;

  --card-bg: rgba(15, 23, 42, 0.96);
  --card-border: rgba(255, 255, 255, 0.08);

  /* --primary: #22d3ee; */
  --primary: #4f46e5;
  --primary-rgb: 34, 211, 238;
  /* --primary-hover: #67e8f9; */
  --primary-hover: #4f46e5;
  --primary-soft: rgba(34, 211, 238, 0.18);

  --border-soft: rgba(255, 255, 255, 0.08);
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.6);
}


/* =====================================================
   DARK THEME BASE APPLICATION
===================================================== */


html[data-theme="synthwave"] {
  background-color: var(--bg-main);
  color: var(--text-main);
}
html[data-theme="synthwave"] body {
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* =====================================================
   FORCE LIGHT THEME (OVERRIDES DEVICE / DAISYUI)
===================================================== */

html[data-theme="light"] {
  background-color: var(--bg-main);
  color: var(--text-main);
}

html[data-theme="light"] body {
  background-color: var(--bg-main);
  color: var(--text-main);
}

/* =====================================================
   COMMON CARD / BLOCK STYLING (THEME SAFE)
===================================================== */

.calc-block,
.card {
    background: linear-gradient(
    135deg,
    var(--card-bg) 0%,
    rgba(var(--primary-rgb), 0.02) 100%
  );
  color: var(--text-main);
  border: 1px solid var(--card-border);
  border-top: 2px solid var(--primary-soft);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: var(--shadow-soft);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  overflow: hidden;
}

.calc-block:hover,
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-soft);
}

/* Subtle shimmer effect on hover */
.calc-block::before,
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.5s;
  pointer-events: none;
}

.calc-block:hover::before,
.card:hover::before {
  left: 100%;
}

/* =====================================================
   FOOTER STYLING (THEME SAFE - FIX DARK MODE CONTRAST)
===================================================== */

footer {
  background-color: var(--bg-secondary);
  color: var(--text-main);
  border-top: 1px solid var(--border-soft);
  padding: var(--spacing-lg);
  margin-top: var(--spacing-2xl);
}

footer a {
  color: var(--primary);
  transition: color 0.2s ease;
  text-decoration: none;
}

footer a:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

footer h6 {
  color: var(--text-main);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

/* =====================================================
   SIMPLE THEME TOGGLE
===================================================== */

/* .theme-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch .slider {
  position: absolute;
  inset: 0;
  background-color: #e5e7eb;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.theme-switch .slider::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  top: 3px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
} */

/* Checked = Dark mode */
/* .theme-switch input:checked + .slider {
  background-color: var(--primary);
}

.theme-switch input:checked + .slider::before {
  transform: translateX(18px); */
/* } */

/* Focus accessibility */
/* .theme-switch input:focus-visible + .slider {
  outline: 2px dashed var(--primary);
  outline-offset: 3px;
} */

/* Dark mode background tweak */
/* html[data-theme="synthwave"] .theme-switch .slider {
  background-color: #334155;
}

.theme-switch {
  position: relative;
}

.theme-switch .slider {
  position: relative;
}

.theme-switch .slider::after {
  content: "☾";
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 1;
  color: black;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.theme-switch input:not(:checked) + .slider::after {
  content: "☀";
  left: 6px;
  right: auto;
  transform: translateY(-50%);
  color: black;
} */

/* unify accent colors */
a {
  color: var(--primary);
}

a:hover {
  color: var(--primary-hover);
}

button,
.btn {
  color: inherit;
}

/* .inherited-color{
  color: inherit;
} */

.initial-color{
  color: initial;
}

option {
  /* background-color: #020617; */
  color: black;
}

/* =====================================================
   DARK MODE FORM CONTROLS FIX
===================================================== */

html[data-theme="synthwave"] .input,
html[data-theme="synthwave"] .textarea {
  background-color: var(--bg-main);          /* dark surface */
  color: #e5e7eb;                     /* light text */
  border-color: rgba(255,255,255,0.12);
}

html[data-theme="synthwave"] .input::placeholder,
html[data-theme="synthwave"] .textarea::placeholder {
  color: #9ca3af;
}

html[data-theme="synthwave"] .select {
    background-color: var(--bg-main);         /* dark surface */
    color: var(--text-main);
}

html[data-theme="synthwave"] .select option {
  background-color: var(--bg-main);
  color: var(--text-main);
}

html[data-theme="synthwave"] .select option:hover{
  color: var(--primary-hover);
}

/* Focus state */
html[data-theme="synthwave"] .input:focus,
html[data-theme="synthwave"] .select:focus,
html[data-theme="synthwave"] .textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(79,70,229,0.35);
}

html[data-theme="synthwave"] .input,
html[data-theme="synthwave"] .select {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}