:root {
  --brand-primary: #0d9488;       /* teal-600 */
  --brand-primary-soft: #14b8a6;  /* teal-500 */
  --brand-secondary: #0ea5e9;     /* sky-500 — secondary blue */
  --brand-accent-warm: #f97316;   /* orange-500 — CTA accent */
  --brand-accent-cool: #10b981;   /* emerald-500 — success accent */

  /* Light theme defaults */
  --bg: #ffffff;
  --bg-elev: #f8fafc;
  --bg-soft: #f1f5f9;
  --text: #0f172a;
  --text-muted: #475569;
  --text-faint: #94a3b8;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --shadow: 0 4px 20px -4px rgba(15, 23, 42, 0.08);
}

[data-theme="dark"] {
  --bg: #0a0e14;
  --bg-elev: #11161e;
  --bg-soft: #161c26;
  --text: #f1f5f9;
  --text-muted: #cbd5e1;
  --text-faint: #64748b;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.6);
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}
.font-display { font-family: "Syne", ui-sans-serif, system-ui; }
.font-mono    { font-family: "DM Mono", ui-monospace, monospace; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* Reusable */
.surface       { background: var(--bg-elev); border: 1px solid var(--border); }
.surface-soft  { background: var(--bg-soft); border: 1px solid var(--border); }
.text-soft     { color: var(--text-muted); }
.text-faint    { color: var(--text-faint); }
.border-soft   { border-color: var(--border); }
.border-strong { border-color: var(--border-strong); }

.btn-primary {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: white;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 6px 24px -6px var(--brand-primary); }
.btn-primary:active { transform: translateY(0); }

.btn-accent {
  background: linear-gradient(135deg, var(--brand-accent-warm), #fb923c);
  color: white;
}
.btn-success {
  background: linear-gradient(135deg, var(--brand-accent-cool), #34d399);
  color: white;
}

.text-brand { color: var(--brand-primary); }
.bg-brand { background: var(--brand-primary); }

.hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--brand-primary-soft); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  color: var(--brand-primary);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 30%, transparent);
  font-family: "DM Mono", monospace;
}
.chip-warm {
  background: color-mix(in srgb, var(--brand-accent-warm) 14%, transparent);
  color: var(--brand-accent-warm);
  border-color: color-mix(in srgb, var(--brand-accent-warm) 35%, transparent);
}
.chip-cool {
  background: color-mix(in srgb, var(--brand-accent-cool) 14%, transparent);
  color: var(--brand-accent-cool);
  border-color: color-mix(in srgb, var(--brand-accent-cool) 35%, transparent);
}

.input {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); outline: none;
  font-family: "DM Sans", sans-serif; font-size: 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input:focus { border-color: var(--brand-primary-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 15%, transparent); }
.input.error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }

.grid-bg {
  background-image:
    linear-gradient(color-mix(in srgb, var(--brand-primary) 18%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 18%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 75%);
}

.glow {
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-primary) 30%, transparent) 0%, transparent 65%);
  filter: blur(40px);
}

/* Animations */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-float { animation: float 4s ease-in-out infinite; }
.animate-spin-slow { animation: spin-slow 20s linear infinite; }
.anim-in { animation: fadeInUp 0.4s ease-out both; }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(120%);
  padding: 12px 20px; border-radius: 14px; font-weight: 600; font-size: 14px;
  background: var(--bg-elev); color: var(--text); border: 1px solid var(--border);
  box-shadow: var(--shadow); z-index: 100;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  display: flex; align-items: center; gap: 10px;
}
.toast.show { transform: translateX(-50%) translateY(0); }

/* Drawer/modal backdrop */
.backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 60; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.backdrop.show { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 100%; max-width: 440px;
  background: var(--bg); border-left: 1px solid var(--border);
  z-index: 70; transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex; flex-direction: column;
}
.drawer.show { transform: translateX(0); }

/* Hide number input arrows */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* a11y */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline: 2px solid var(--brand-primary-soft); outline-offset: 2px; border-radius: 6px; }

/* Range slider styling */
input[type="range"] { accent-color: var(--brand-primary); }