/* Custom Styles for Nook Journey Strict Dark Clay Rate Card */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Prompt:wght@300;400;500;600&display=swap");

:root {
  --bg-canvas: #09090a;
  --bg-surface: #121315;
  --bg-surface-hover: #18191c;
  --text-heading: #ffffff;
  --text-body: #99a091;
  --text-muted: #717769;
  --accent-lime: #b7ee69;
  --accent-lime-hover: #a3e04e;
  --border-subtle: #24262b;
  --border-accent: rgba(183, 238, 105, 0.4);
}

body {
  font-family: "Inter", "Prompt", sans-serif;
  background-color: var(--bg-canvas);
  color: var(--text-body);
}

.display-head {
  font-family: "Plus Jakarta Sans", "Prompt", sans-serif;
  letter-spacing: -0.04em;
}

/* Claymorphic Dark Card Surface & Depth */
.clay-card-surface {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  box-shadow:
    0 10px 30px -5px rgba(0, 0, 0, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.05);
  transition:
    transform 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.clay-card-surface:hover {
  transform: translateY(-2px);
  border-color: var(--border-accent);
  box-shadow:
    0 16px 36px -6px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(183, 238, 105, 0.12);
}

/* Embla Carousel Styling - 1.3 Cards Visible */
.embla__viewport {
  width: 100%;
}
.embla__container {
  display: flex;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -webkit-tap-highlight-color: transparent;
  margin-left: -0.75rem;
}
.embla__slide {
  flex: 0 0 76%; /* Show 1.3 cards per view */
  min-width: 0;
  padding-left: 0.75rem;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #09090a;
}
::-webkit-scrollbar-thumb {
  background: #24262b;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #b7ee69;
}