@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body: 'Inter', sans-serif;

    --background: 0 0% 100%;
    --foreground: 210 20% 12%;
    --card: 0 0% 100%;
    --card-foreground: 210 20% 12%;
    --popover: 0 0% 100%;
    --popover-foreground: 210 20% 12%;
    --primary: 199 89% 48%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 20% 96%;
    --secondary-foreground: 210 20% 12%;
    --muted: 210 15% 96%;
    --muted-foreground: 210 10% 45%;
    --accent: 199 89% 95%;
    --accent-foreground: 199 89% 30%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 210 15% 90%;
    --input: 210 15% 90%;
    --ring: 199 89% 48%;
    --chart-1: 199 89% 48%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.625rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 199 89% 48%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 199 89% 95%;
    --sidebar-accent-foreground: 199 89% 30%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 199 89% 48%;
  }

  .dark {
    --background: 210 20% 6%;
    --foreground: 0 0% 95%;
    --card: 210 20% 8%;
    --card-foreground: 0 0% 95%;
    --popover: 210 20% 8%;
    --popover-foreground: 0 0% 95%;
    --primary: 199 89% 48%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 20% 14%;
    --secondary-foreground: 0 0% 95%;
    --muted: 210 15% 14%;
    --muted-foreground: 210 10% 55%;
    --accent: 199 89% 15%;
    --accent-foreground: 199 89% 70%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 210 15% 18%;
    --input: 210 15% 18%;
    --ring: 199 89% 48%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 210 20% 6%;
    --sidebar-foreground: 0 0% 95%;
    --sidebar-primary: 199 89% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 199 89% 15%;
    --sidebar-accent-foreground: 199 89% 70%;
    --sidebar-border: 210 15% 18%;
    --sidebar-ring: 199 89% 48%;
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }

  /* Display headings: tighten tracking as size grows (body text stays at 0) */
  h1, h2 {
    letter-spacing: -0.02em;
  }
}

@layer components {
  /* Translucent header: content scrolls underneath instead of behind a solid bar */
  .site-header-material {
    /* 0.92 rather than 0.82: at lower opacity the dark hero and CTA bands showed through as a muddy grey */
    background-color: rgba(255, 255, 255, 0.92);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }

  /* Mobile product action bar, same material as the header */
  .action-bar-material {
    background-color: rgba(255, 255, 255, 0.86);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    backdrop-filter: saturate(180%) blur(16px);
  }

  /* Browsers without backdrop-filter get a solid surface so text stays legible */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header-material,
    .action-bar-material {
      background-color: #ffffff;
    }
  }
}

/* Press feedback: respond on press, not just on hover (hover does not exist on touch) */
button:not(:disabled),
a.rounded-lg,
a.rounded-xl {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform, scale;
}
/* `scale` (not `transform`) so elements already positioned with a transform keep it.
   Wide rows and inline text buttons opt out with .press-flat: 0.97 of an 800px row is a 25px lurch,
   so they get a background tint on press instead. */
button:not(:disabled):not(.press-flat):active,
a.rounded-lg:not(.press-flat):active,
a.rounded-xl:not(.press-flat):active {
  scale: 0.97;
  transition-duration: 100ms;
}
.press-flat:active {
  opacity: 0.7;
  transition-duration: 60ms;
}

/* FAQ accordion: animate to natural height via grid rows, critically damped feel, no overshoot */
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 280ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms ease-out;
}
.faq-panel[data-open="true"] {
  grid-template-rows: 1fr;
  opacity: 1;
}
.faq-chevron {
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), color 150ms ease;
}

/* Modal: materialise from slightly smaller with the scrim fading in, rather than appearing from nowhere */
@keyframes modal-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-surface-in {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.modal-scrim { animation: modal-scrim-in 200ms ease-out both; }
.modal-surface { animation: modal-surface-in 280ms cubic-bezier(0.32, 0.72, 0, 1) both; }

@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):active,
  a.rounded-lg:active,
  a.rounded-xl:active {
    scale: none;
  }
  .faq-panel,
  .faq-chevron {
    transition: opacity 150ms ease;
  }
  .modal-surface { animation: modal-scrim-in 150ms ease-out both; }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header-material,
  .action-bar-material {
    background-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (prefers-contrast: more) {
  .site-header-material,
  .action-bar-material {
    background-color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: #18212B;
  }
}