/* VibeHost brand overrides for Pingvin Share — Mantine v6 */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap");

:root {
  --vh-coral: #FF6B4A;
  --vh-coral-ink: #E04F2F;
  --vh-coral-soft: #FFE7DF;
  --vh-navy: #0F1B2D;
  --vh-cream: #FBF7F2;
  --vh-sand: #F3EADB;
  --vh-line: #E8DFD1;
}

/* ============ Surface + typography ============ */
html, body {
  background: var(--vh-cream) !important;
}
body,
body * {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
h1, h2, h3,
.mantine-Title-root,
[class*="-Title-root"] {
  font-family: "Fraunces", Georgia, serif !important;
  letter-spacing: -0.01em;
  color: var(--vh-navy) !important;
}

/* Header / footer bars — cream not white */
.mantine-Header-root,
.mantine-Footer-root,
.mantine-AppShell-root {
  background-color: var(--vh-cream) !important;
  border-color: var(--vh-line) !important;
}

/* ============ Buttons ============ */
/* Mantine v6 has no data-variant on Button; default filled gets root class + emotion hash. */
.mantine-Button-root,
button.mantine-UnstyledButton-root.mantine-Button-root {
  background-color: var(--vh-coral) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px -10px rgba(255, 107, 74, 0.55) !important;
  transition: background-color 0.2s, transform 0.15s !important;
}
.mantine-Button-root:hover,
button.mantine-UnstyledButton-root.mantine-Button-root:hover {
  background-color: var(--vh-coral-ink) !important;
  transform: translateY(-1px);
}
.mantine-Button-root:active {
  transform: translateY(0) !important;
}

/* ActionIcon */
.mantine-ActionIcon-root {
  color: var(--vh-coral-ink) !important;
}
.mantine-ActionIcon-root:hover {
  background-color: var(--vh-coral-soft) !important;
}

/* ============ Links ============ */
.mantine-Anchor-root,
a.mantine-Text-root,
a:not(.mantine-Button-root):not(.mantine-UnstyledButton-root) {
  color: var(--vh-coral-ink) !important;
}
.mantine-Anchor-root:hover,
a:not(.mantine-Button-root):hover {
  color: var(--vh-coral) !important;
}

/* ============ Dropzone ============ */
.mantine-Dropzone-root {
  background-color: #fff !important;
  border-color: #FFAF96 !important;
  border-width: 2px !important;
  border-style: dashed !important;
  border-radius: 16px !important;
  color: var(--vh-navy) !important;
  transition: border-color 0.2s, background 0.2s !important;
}
.mantine-Dropzone-root:hover,
.mantine-Dropzone-root[data-accept] {
  border-color: var(--vh-coral) !important;
  background-color: #FFF4EE !important;
}
.mantine-Dropzone-root[data-reject] {
  border-color: #D94F6A !important;
  background-color: #FBEAEE !important;
}
.mantine-Dropzone-root svg {
  color: var(--vh-coral) !important;
  stroke: var(--vh-coral) !important;
}

/* ============ Inputs + focus ============ */
.mantine-Input-input:focus,
.mantine-TextInput-input:focus,
.mantine-PasswordInput-input:focus,
.mantine-Textarea-input:focus,
.mantine-Select-input:focus {
  border-color: var(--vh-coral) !important;
  box-shadow: 0 0 0 1px var(--vh-coral) !important;
}

/* ============ Switches / checkboxes / radios ============ */
.mantine-Switch-input:checked + .mantine-Switch-track,
.mantine-Switch-input:checked ~ .mantine-Switch-track {
  background-color: var(--vh-coral) !important;
  border-color: var(--vh-coral) !important;
}
.mantine-Checkbox-input:checked {
  background-color: var(--vh-coral) !important;
  border-color: var(--vh-coral) !important;
}
.mantine-Radio-radio:checked {
  background-color: var(--vh-coral) !important;
  border-color: var(--vh-coral) !important;
}

/* ============ Progress ============ */
.mantine-Progress-bar {
  background-color: var(--vh-coral) !important;
}
.mantine-Progress-root {
  background-color: var(--vh-coral-soft) !important;
}

/* ============ Loader ============ */
.mantine-Loader-root svg,
.mantine-Loader-root circle {
  stroke: var(--vh-coral) !important;
}

/* ============ Active nav / badges ============ */
.mantine-NavLink-root[data-active="true"],
[data-active="true"] {
  background-color: var(--vh-coral-soft) !important;
  color: var(--vh-coral-ink) !important;
}
.mantine-Badge-root {
  background-color: var(--vh-coral-soft) !important;
  color: var(--vh-coral-ink) !important;
}

/* ============ Hide Pingvin branding footer ============ */
footer .mantine-Text-root:has(a[href*="pingvin-share"]) { display: none !important; }