@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..800;1,9..144,400..700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Toko Paper / Studio Palette */
  --color-paper: #FAF8F5;
  --color-paper-card: #FFFFFF;
  --color-paper-muted: #F2EFEA;
  --color-paper-border: #E8E4DC;
  
  --color-graphite-900: #141416;
  --color-graphite-800: #1C1C1E;
  --color-graphite-700: #2C2C30;
  --color-graphite-muted: #5C5C66;
  --color-graphite-subtle: #8E8E9A;

  /* App Accents */
  --color-patinha: #D86B43;
  --color-patinha-warm: #FAF2EB;
  --color-patinha-border: #EED7C8;

  --color-bizu: #289F70;
  --color-bizu-fresh: #EDF7F2;
  --color-bizu-border: #C6EADB;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  color: var(--color-graphite-900);
  background-color: var(--color-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-serif-display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50, "WONK" 1;
}

.font-mono-tag {
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

/* Custom Selection */
::selection {
  background-color: #1C1C1E;
  color: #FAF8F5;
}

/* Accessible Focus */
a:focus-visible, button:focus-visible {
  outline: 2px solid #1C1C1E;
  outline-offset: 3px;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--color-paper);
}
::-webkit-scrollbar-thumb {
  background: #D8D4CA;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #BFBBAF;
}

/* Studio Canvas & Depth */
.studio-sheet {
  background-color: var(--color-paper-card);
  border: 1px solid var(--color-paper-border);
  box-shadow: 0 4px 20px -2px rgba(28, 28, 30, 0.04);
}

.dark-stage {
  background-color: #141416;
  background-image: radial-gradient(circle at 10% 20%, rgba(216, 107, 67, 0.08) 0%, transparent 40%),
                    radial-gradient(circle at 90% 80%, rgba(40, 159, 112, 0.08) 0%, transparent 40%);
}

/* Product Showcase Cards */
.product-stage-patinha {
  background: linear-gradient(180deg, #FBF6F0 0%, #FFFFFF 100%);
  border: 1px solid var(--color-patinha-border);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-stage-patinha:hover {
  box-shadow: 0 20px 40px -12px rgba(216, 107, 67, 0.12);
  transform: translateY(-2px);
}

.product-stage-bizu {
  background: linear-gradient(180deg, #F0FAF5 0%, #FFFFFF 100%);
  border: 1px solid var(--color-bizu-border);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.product-stage-bizu:hover {
  box-shadow: 0 20px 40px -12px rgba(40, 159, 112, 0.12);
  transform: translateY(-2px);
}

/* Phone Mockup Frame */
.phone-mockup-wrapper {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.14);
  border: 5px solid #1C1C1E;
  background-color: #000000;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.phone-mockup-wrapper:hover {
  transform: translateY(-4px);
}

/* Carousel */
.carousel-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar {
  display: none;
}
.carousel-item {
  scroll-snap-align: center;
  flex: 0 0 280px;
}
@media (min-width: 640px) {
  .carousel-item {
    flex: 0 0 310px;
  }
}
@media (min-width: 1024px) {
  .carousel-item {
    flex: 0 0 330px;
  }
}