/**
 * Isle of Moss — LittleLink theme
 * See DESIGN.md
 */

:root {
  --iom-cream: #fbf8f2;
  --iom-cream-soft: #f4efe4;
  --iom-ink: #111813;
  --iom-ink-soft: #2c3530;
  --iom-mute: #6f786f;
  --iom-line: #e8e2d3;
  --iom-moss-50: #f0f5ef;
  --iom-moss-500: #2f5a2a;
  --iom-moss-600: #234521;
  --iom-moss-700: #1a3619;
  --iom-moss-900: #0d1a0c;
  --iom-gold-100: #f4e3b3;
  --iom-gold-400: #c9a24b;
  --iom-font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --iom-font-display: "Newsreader", ui-serif, Georgia, serif;
  --iom-font-serif: "Instrument Serif", ui-serif, Georgia, serif;
}

body {
  background-color: var(--iom-cream) !important;
  background-image:
    radial-gradient(at 8% 0%, rgba(173, 198, 163, 0.35) 0px, transparent 50%),
    radial-gradient(at 80% 10%, rgba(244, 227, 179, 0.45) 0px, transparent 50%),
    radial-gradient(at 100% 80%, rgba(125, 164, 112, 0.18) 0px, transparent 50%),
    radial-gradient(at 0% 100%, rgba(244, 227, 179, 0.25) 0px, transparent 50%);
  background-attachment: fixed;
  color: var(--iom-ink) !important;
  font-family: var(--iom-font-sans) !important;
  -webkit-font-smoothing: antialiased;
}

/* Force light brand surface even if theme-auto/dark classes exist */
:root.theme-dark body,
:root.theme-auto body {
  background-color: var(--iom-cream) !important;
  color: var(--iom-ink) !important;
}

@media (prefers-color-scheme: dark) {
  :root.theme-auto body {
    background-color: var(--iom-cream) !important;
    color: var(--iom-ink) !important;
  }
}

.container {
  padding-top: 2.5rem;
}

h1 {
  font-family: var(--iom-font-display) !important;
  font-weight: 500 !important;
  font-size: 2rem !important;
  letter-spacing: -0.02em;
  color: var(--iom-ink);
  margin-bottom: 0.35rem !important;
}

h1 .iom-mark {
  display: block;
  font-size: 0.7rem;
  font-family: var(--iom-font-sans);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--iom-gold-400);
  margin-bottom: 0.5rem;
}

.container > .column > p,
.iom-bio {
  font-family: var(--iom-font-sans);
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  color: var(--iom-mute) !important;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.75rem !important;
}

.iom-bio em {
  font-family: var(--iom-font-serif);
  font-style: italic;
  color: var(--iom-moss-600);
  font-size: 1.05em;
}

.avatar {
  width: 7.5rem !important;
  height: 7.5rem !important;
  border: 3px solid var(--iom-moss-500);
  box-shadow:
    0 0 0 6px rgba(47, 90, 42, 0.08),
    0 12px 32px rgba(13, 26, 12, 0.08);
  background: var(--iom-cream-soft);
  object-fit: contain !important;
  padding: 0.65rem;
  margin-bottom: 1.25rem !important;
}

.avatar.avatar--product {
  object-fit: cover !important;
  padding: 0;
}

a:not(.button) {
  color: var(--iom-moss-600) !important;
}

a:not(.button):hover {
  color: var(--iom-moss-500) !important;
}

.button,
button {
  border-radius: 999px !important;
  font-family: var(--iom-font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  min-height: 3.15rem !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    filter 0.15s ease;
  box-shadow: 0 1px 2px rgba(17, 24, 19, 0.06);
}

.button:hover,
button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(17, 24, 19, 0.1);
}

.button:focus-visible {
  outline: 2px solid var(--iom-moss-500);
  outline-offset: 3px;
}

/* Iconoir icons — inherit button text color (fixes white-on-cream invisibility) */
.button .icon,
.button [class^="iconoir-"],
.button [class*=" iconoir-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: currentColor;
  -webkit-text-stroke: 0;
}

/* Primary shop CTA — brand moss */
.button-iom-shop {
  --button-text: #fbf8f2;
  --button-background: #1a3619;
  --button-border: none;
}

.button-iom-shop .icon,
.button-iom-shop [class^="iconoir-"] {
  color: #fbf8f2;
}

.button-iom-shop:hover {
  --button-background: #234521;
  filter: brightness(1.05);
}

/* Secondary site links — dark moss icons on cream */
.button-iom-outline {
  --button-text: #1a3619;
  --button-background: #fbf8f2;
  --button-border: 1.5px solid #e8e2d3;
}

.button-iom-outline .icon,
.button-iom-outline [class^="iconoir-"] {
  color: #1a3619;
}

.button-iom-outline:hover {
  --button-border: 1.5px solid #2f5a2a;
  background-color: var(--iom-moss-50) !important;
}

/* WhatsApp closer to brand green + platform green */
.button-whatsapp {
  --button-text: #ffffff;
  --button-background: #1f6b3a;
}

.button-whatsapp .icon,
.button-whatsapp [class^="iconoir-"],
.button-instagram .icon,
.button-instagram [class^="iconoir-"],
.button-tiktok .icon,
.button-tiktok [class^="iconoir-"] {
  color: #ffffff;
}

.button-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer {
  color: var(--iom-mute);
  font-size: 0.8rem !important;
}

footer a {
  text-decoration: none;
  font-weight: 500;
}

.iom-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin: -0.5rem 0 1.5rem;
}

.iom-pill {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--iom-moss-700);
  background: var(--iom-moss-50);
  border: 1px solid rgba(47, 90, 42, 0.12);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
}

@media (prefers-reduced-motion: reduce) {
  .button,
  button {
    transition: none;
  }
  .button:hover,
  button:hover {
    transform: none;
  }
}