/*
 * Daroha website base layer: font loading, reset, type scale, layout
 * primitives and the shared nav/footer chrome. Page-specific styles live in
 * their own files and assume this one is loaded first.
 */

/* ── Fonts ───────────────────────────────────────────────────
 * Self-hosted so the site loads no third-party resources — the privacy page
 * promises no external tracking. Both files are the Nunito variable font
 * (weight axis 200–1000); only the unicode range differs.
 */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../assets/fonts/nunito-variable-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../assets/fonts/nunito-variable-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* ── Reset ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + var(--p-5));
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--size-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: light;
    background: var(--bg);
  }

  body {
    background: var(--bg);
    color: var(--text);
  }
}

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: var(--text);
  text-decoration: none;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--accent-mid);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Type scale ──────────────────────────────────────────────── */
.display,
.h2,
.h3 {
  font-weight: var(--weight-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.display {
  font-size: var(--size-display);
  line-height: var(--lh-display);
}

.h2 {
  font-size: var(--size-h2);
  line-height: var(--lh-heading);
}

.h3 {
  font-size: var(--size-h3);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-size: var(--size-body-lg);
  font-weight: var(--weight-strong);
  line-height: 1.2;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow--amber {
  color: var(--amber);
}

.lead {
  font-size: var(--size-body-lg);
  color: var(--text-2);
  text-wrap: pretty;
}

.body {
  color: var(--text-2);
  text-wrap: pretty;
}

.caption {
  font-size: var(--size-caption);
  font-weight: var(--weight-strong);
  color: var(--text-2);
}

/* ── Layout primitives ──────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--section-y);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--p-2);
  left: var(--p-2);
  z-index: 100;
  padding: var(--p-2) var(--p-4);
  border-radius: var(--r-2);
  background: var(--card);
  box-shadow: var(--shadow-1);
  font-weight: var(--weight-strong);
  color: var(--text);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* ── Nav ─────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--card-hard);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--card-2);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  height: var(--nav-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-1);
  font-size: var(--size-h3);
  font-weight: var(--weight-display);
  letter-spacing: -0.01em;
  color: var(--text);
}

.brand:hover {
  text-decoration: none;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--r-2);
  background: var(--accent);
  overflow: hidden;
}

.brand__mark img {
  width: 34px;
  height: 34px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  margin-inline-start: auto;
}

.nav__link {
  font-size: var(--size-body);
  font-weight: var(--weight-strong);
  color: var(--text-2);
  transition: color var(--t-micro) var(--ease-standard);
}

.nav__link:hover,
.nav__link[aria-current='page'] {
  color: var(--text);
  text-decoration: none;
}

/* Scoped to .nav so it outranks the later .btn display rule. */
.nav .nav__cta {
  display: none;
}

@media (min-width: 640px) {
  .nav .nav__cta {
    display: inline-flex;
  }
}

@media (max-width: 639px) {
  .nav__inner {
    gap: var(--gap-2);
  }

  .nav__links {
    gap: var(--p-3);
  }

  .nav__link {
    font-size: var(--size-caption);
  }
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-1);
  padding: var(--p-3) var(--p-5);
  border-radius: var(--r-pill);
  font-size: var(--size-body);
  font-weight: var(--weight-strong);
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--t-micro) var(--ease-standard),
    color var(--t-micro) var(--ease-standard),
    transform var(--t-press) var(--ease-standard);
}

.btn:hover {
  text-decoration: none;
}

.btn:active {
  transform: scale(var(--press-scale));
}

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

.btn--accent:hover {
  background: var(--accent-edit);
}

.btn--inverted {
  background: var(--card);
  color: var(--text);
  box-shadow: var(--shadow-1);
}

.btn--inverted:hover {
  background: var(--card-hard);
}

.btn--ghost {
  padding-inline: var(--p-3);
  color: var(--text-2);
}

.btn--ghost:hover {
  color: var(--text);
}

.btn[aria-disabled='true'] {
  background: var(--card-2);
  color: var(--text-4);
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

.btn__note {
  font-size: var(--size-caption);
  font-weight: var(--weight-strong);
  color: var(--text-2);
}

/* ── Footer ──────────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--card-2);
  padding-block: var(--block-y);
}

.footer__grid {
  display: grid;
  gap: var(--gap-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-3);
  }
}

@media (min-width: 1024px) {
  .footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--gap-2);
  }
}

.footer__tagline {
  margin-block-start: var(--gap-1);
  max-width: 30ch;
  font-size: var(--size-caption);
  font-weight: var(--weight-body);
  color: var(--text-2);
  letter-spacing: 0;
  text-transform: none;
}

.footer__heading {
  margin-block-end: var(--gap-1);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
}

.footer__link {
  font-weight: var(--weight-strong);
  color: var(--text-2);
}

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

.footer__legal {
  margin-block-start: var(--block-y);
  padding-block-start: var(--p-4);
  border-top: 1px solid var(--card-2);
  font-size: var(--size-caption);
  color: var(--text-2);
}