/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --accent-color: oklch(84.5% 0.143 164.978);
  --accent-hover-color: oklch(84.5% 0.143 164.978 / 0.8);
  --accent-soft-color: oklch(84.5% 0.143 164.978 / 0.2);
  --accent-softer-color: oklch(84.5% 0.143 164.978 / 0.15);
  --accent-strong-soft-color: oklch(84.5% 0.143 164.978 / 0.3);
  --accent-text-color: oklch(26.2% 0.051 172.552);
  --public-header-height: 5rem;
  --public-sticky-offset: calc(var(--public-header-height) + 2rem);
  --font-display: "Abel", "Arial Narrow", sans-serif;
}

.font-display {
  font-family: var(--font-display);
}

.bg-accent {
  background-color: var(--accent-color);
}

.bg-accent-15 {
  background-color: var(--accent-softer-color);
}

.bg-accent-20 {
  background-color: var(--accent-soft-color);
}

.bg-accent-30 {
  background-color: var(--accent-strong-soft-color);
}

.border-accent {
  border-color: var(--accent-color);
}

.text-accent {
  color: var(--accent-color);
}

.text-accent-deep {
  color: var(--accent-text-color);
}

.decoration-accent {
  text-decoration-color: var(--accent-color);
}

.hover-decoration-accent:hover {
  text-decoration-color: var(--accent-color);
}

.accent-control {
  accent-color: var(--accent-color);
}

.focus-ring-accent:focus {
  --tw-ring-color: var(--accent-color);
}

.hover-bg-accent:hover {
  background-color: var(--accent-color);
}

.hover-bg-accent-80:hover {
  background-color: var(--accent-hover-color);
}

.file-bg-accent::file-selector-button {
  background-color: var(--accent-color);
}

.hover-bg-white:hover {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #09090b;
}

.public-sticky-panel {
  scroll-margin-top: var(--public-sticky-offset);
}

@media (min-width: 64rem) {
  .public-sticky-panel {
    top: var(--public-sticky-offset);
  }
}

.theme-dark {
  color-scheme: dark;
}

.theme-dark .text-zinc-950,
.theme-dark .text-zinc-900,
.theme-dark .text-black {
  color: #ffffff;
}

.theme-dark .text-zinc-700,
.theme-dark .text-black\/70 {
  color: rgb(255 255 255 / 0.76);
}

.theme-dark .text-zinc-600,
.theme-dark .text-black\/60 {
  color: rgb(255 255 255 / 0.64);
}

.theme-dark .text-zinc-500,
.theme-dark .text-black\/50 {
  color: rgb(255 255 255 / 0.54);
}

.theme-dark .text-zinc-400,
.theme-dark .text-black\/40 {
  color: rgb(255 255 255 / 0.44);
}

.theme-dark .text-zinc-300 {
  color: rgb(255 255 255 / 0.32);
}

.theme-dark .footer-social-link:hover {
  color: #09090b;
}

.theme-dark .text-accent-deep {
  color: var(--accent-color);
}

.theme-dark .bg-white,
.theme-dark .bg-zinc-50,
.theme-dark .bg-zinc-50\/70,
.theme-dark .bg-zinc-100 {
  background-color: #09090b;
}

.theme-dark .bg-white\/95 {
  background-color: rgb(9 9 11 / 0.95);
}

.theme-dark input.bg-white,
.theme-dark textarea.bg-white,
.theme-dark select.bg-white {
  background-color: #18181b;
  color: #ffffff;
}

.theme-dark ::placeholder {
  color: rgb(255 255 255 / 0.38);
}

.theme-dark .border-zinc-100,
.theme-dark .border-zinc-200,
.theme-dark .border-zinc-300 {
  border-color: rgb(255 255 255 / 0.16);
}

.theme-dark .divide-zinc-100 > :not(:last-child),
.theme-dark .divide-zinc-200 > :not(:last-child),
.theme-dark .divide-zinc-300 > :not(:last-child) {
  border-color: rgb(255 255 255 / 0.16);
}

.theme-dark .ring-zinc-900\/5,
.theme-dark .ring-zinc-900\/10,
.theme-dark .ring-zinc-900\/15,
.theme-dark .ring-zinc-900\/20,
.theme-dark .ring-black\/10,
.theme-dark .ring-black\/20 {
  --tw-ring-color: rgb(255 255 255 / 0.16);
}

.theme-dark .shadow-zinc-800\/5,
.theme-dark .shadow-zinc-800\/10 {
  --tw-shadow-color: rgb(0 0 0 / 0.6);
}

.theme-dark .bg-accent.text-zinc-950,
.theme-dark .bg-accent .text-zinc-950,
.theme-dark .bg-accent.text-black,
.theme-dark .bg-accent .text-black {
  color: #09090b;
}