/*
 * Familinx website — the app's design system, in CSS.
 *
 * Every token below is copied from the Kotlin source of truth, so the site and the app
 * cannot drift apart:
 *   colours  core/.../design_system/theme/Color.kt   (FamilinkPalette, Light/DarkColors)
 *   radius   core/.../design_system/theme/Shape.kt   (FamilinkRadius)
 *   spacing  core/.../design_system/theme/Spacing.kt (FamilinkSpacing)
 *   type     core/.../design_system/theme/Type.kt    (Cairo, the M3 scale)
 * If the Figma file moves a value, change it in Kotlin first and copy it here.
 *
 * Cairo is self-hosted on purpose: a privacy policy that calls out to Google Fonts hands
 * the reader's IP address to Google to read a page about not doing that.
 */

/* ---------------------------------------------------------------- fonts */

@font-face {
  font-family: 'Cairo';
  src: url('fonts/cairo-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cairo';
  src: url('fonts/cairo-semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cairo';
  src: url('fonts/cairo-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens */

:root {
  /* Palette primitives — Color.kt */
  --green-100: #e5ece0;
  --green-200: #cbdac1;
  --green-300: #a8c298;
  --green-600: #4a6f3b;
  --green-700: #3b5830;
  --green-800: #2f4527;
  --green-900: #25361f;
  --green-950: #152013;

  --olive-100: #edeadb;
  --olive-200: #dad5b9;
  --olive-600: #7a6f41;
  --olive-800: #504930;
  --olive-900: #453f2c;

  --gold-100: #f3edd4;
  --gold-200: #e7d9aa;
  --gold-300: #d8c076;
  --gold-600: #a27534;
  --gold-800: #6c482b;
  --gold-900: #5b3d28;

  --neutral-0: #ffffff;
  --neutral-50: #faf9f6;
  --neutral-100: #f3f2ed;
  --neutral-200: #e6e4dc;
  --neutral-300: #d2cfc4;
  --neutral-500: #9a9588;
  --neutral-700: #66635a;
  --neutral-900: #494842;

  --darkgreen-50: #f2f5f2;
  --darkgreen-100: #e0e6e0;
  --darkgreen-300: #96aa98;
  --darkgreen-400: #6b836e;
  --darkgreen-700: #334337;
  --darkgreen-800: #2b382e;
  --darkgreen-900: #242e26;
  --darkgreen-950: #141a15;

  /* Semantic roles — light, from FamilinkLightColors */
  --primary: var(--green-600);
  --on-primary: var(--neutral-0);
  --primary-container: var(--green-100);
  --on-primary-container: var(--green-800);

  --secondary-container: var(--olive-100);
  --on-secondary-container: var(--olive-800);

  --tertiary: var(--gold-600);
  --tertiary-container: var(--gold-100);
  --on-tertiary-container: var(--gold-800);

  --background: var(--neutral-50);
  --on-background: var(--neutral-900);
  --surface: var(--neutral-50);
  --on-surface: var(--neutral-900);
  --on-surface-variant: var(--neutral-700);
  --surface-container-lowest: var(--neutral-0);
  --surface-container-low: var(--neutral-100);
  --surface-container: var(--neutral-200);
  --outline: var(--neutral-500);
  --outline-variant: var(--neutral-300);

  /* Radius — Shape.kt */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Spacing — Spacing.kt */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;

  --measure: 68ch;
  --page: 1100px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* FamilinkDarkColors */
    --primary: var(--green-300);
    --on-primary: var(--green-950);
    --primary-container: var(--green-900);
    --on-primary-container: var(--green-200);

    --secondary-container: var(--olive-900);
    --on-secondary-container: var(--olive-200);

    --tertiary: var(--gold-300);
    --tertiary-container: var(--gold-900);
    --on-tertiary-container: var(--gold-200);

    --background: var(--darkgreen-950);
    --on-background: var(--darkgreen-100);
    --surface: var(--darkgreen-950);
    --on-surface: var(--darkgreen-50);
    --on-surface-variant: var(--darkgreen-300);
    --surface-container-lowest: var(--darkgreen-900);
    --surface-container-low: var(--darkgreen-800);
    --surface-container: var(--darkgreen-700);
    --outline: var(--darkgreen-400);
    --outline-variant: var(--darkgreen-700);
  }
}

/* ---------------------------------------------------------------- reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--on-background);
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* bodyLarge — Type.kt */
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: 0.0156em;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/*
 * A link is green everywhere, not only inside `.doc`. Without this the invite and 404
 * pages drew their links in the browser's default blue, which is both off-brand and,
 * on the dark green surface, close to unreadable. Every component that owns its own
 * link colour - the top bar, the footer, the brand, buttons, the skip link - uses a
 * class selector and still wins over this one.
 */
a {
  color: var(--primary);
  text-underline-offset: 3px;
}

/* -------------------------------------------------------------- a11y */

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-lg);
  top: -4rem;
  z-index: 10;
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  text-decoration: none;
  transition: top 120ms ease;
}

.skip-link:focus {
  top: var(--space-lg);
}

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

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

/* -------------------------------------------------------------- layout */

.shell {
  width: min(100% - 2 * var(--space-xl), var(--page));
  margin-inline: auto;
}

@media (max-width: 520px) {
  .shell {
    width: calc(100% - 2 * var(--space-lg));
  }

  .steps > li {
    padding-inline: var(--space-lg);
    padding-inline-start: calc(var(--space-xxl, 32px) + var(--space-xl));
  }

  .steps > li::before {
    inset-inline-start: var(--space-lg);
  }

  .card,
  .centered .card {
    padding: var(--space-lg);
  }
}

.prose {
  max-width: var(--measure);
}

/* ------------------------------------------------------------ topbar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: color-mix(in srgb, var(--background) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--outline-variant);
}

.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  min-height: 64px;
  padding-block: var(--space-sm);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  /* titleLarge */
  font-size: 1.25rem;
  letter-spacing: 0;
}

.brand img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
}

.topbar nav {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.topbar nav a {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-full);
  color: var(--on-surface-variant);
  text-decoration: none;
  /* labelLarge */
  font-size: 0.875rem;
  font-weight: 600;
}

.topbar nav a:hover {
  background: var(--surface-container-low);
  color: var(--on-surface);
}

.topbar nav a[aria-current='page'] {
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.lang-switch {
  border-inline-start: 1px solid var(--outline-variant);
  padding-inline-start: var(--space-sm);
  margin-inline-start: var(--space-sm);
}

/*
 * On a phone the brand and five nav items cannot share one line: `.topbar__inner`
 * does not wrap, so the nav could not shrink below its content and pushed the whole
 * page sideways - every doc page scrolled horizontally. Below this width the nav
 * takes a line of its own.
 */
@media (max-width: 680px) {
  .topbar__inner {
    flex-wrap: wrap;
    row-gap: var(--space-sm);
    padding-block: var(--space-md);
  }

  .topbar nav {
    margin-inline-start: 0;
    width: 100%;
    gap: var(--space-xs) 0;
  }

  .topbar nav a {
    padding-inline: var(--space-sm);
  }

  .lang-switch {
    margin-inline-start: auto;
  }
}

/* --------------------------------------------------------------- hero */

.hero {
  padding-block: var(--space-4xl) var(--space-3xl);
  display: grid;
  gap: var(--space-3xl);
  grid-template-columns: 1fr;
  align-items: center;
}

@media (min-width: 860px) {
  .hero {
    grid-template-columns: 1.15fr 0.85fr;
  }
}

.hero h1 {
  /* displaySmall → headlineLarge on narrow screens */
  font-size: clamp(2rem, 1.2rem + 3.2vw, 2.75rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0 0 var(--space-lg);
}

.hero p.lead {
  font-size: 1.125rem;
  color: var(--on-surface-variant);
  margin: 0 0 var(--space-xl);
  max-width: 54ch;
}

.hero__art {
  justify-self: center;
  width: min(320px, 70%);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--radius-xl);
  background: var(--primary-container);
  padding: var(--space-xl);
}

.hero__art img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-lg);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--tertiary-container);
  color: var(--on-tertiary-container);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------ buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-md) var(--space-xl);
  border: none;
  border-radius: var(--radius-full);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 120ms ease, background-color 120ms ease;
}

.btn--filled {
  background: var(--primary);
  color: var(--on-primary);
}

.btn--filled:hover {
  filter: brightness(1.08);
}

.btn--tonal {
  background: var(--secondary-container);
  color: var(--on-secondary-container);
}

.btn--tonal:hover {
  filter: brightness(0.97);
}

.btn--outlined {
  background: transparent;
  color: var(--primary);
  border: 1px solid var(--outline);
}

.btn--outlined:hover {
  background: var(--surface-container-low);
}

.btn[aria-disabled='true'] {
  background: var(--surface-container);
  color: var(--on-surface-variant);
  cursor: default;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

/* --------------------------------------------------------------- cards */

.card {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.card h3 {
  /* titleLarge */
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 0 0 var(--space-sm);
}

.card p {
  margin: 0;
  color: var(--on-surface-variant);
}

.card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  margin-bottom: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--primary-container);
  color: var(--on-primary-container);
}

.card__icon svg {
  width: 24px;
  height: 24px;
}

.grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* ------------------------------------------------------------ sections */

.section {
  padding-block: var(--space-3xl);
}

.section--tinted {
  background: var(--surface-container-low);
  border-block: 1px solid var(--outline-variant);
}

.section h2 {
  /* headlineSmall */
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 var(--space-sm);
}

.section > .shell > p.section-lead {
  color: var(--on-surface-variant);
  margin: 0 0 var(--space-2xl);
  max-width: var(--measure);
}

/* --------------------------------------------------------- legal pages */

.doc {
  padding-block: var(--space-3xl) var(--space-4xl);
}

.doc h1 {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.25rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--space-sm);
}

.doc .updated {
  color: var(--on-surface-variant);
  font-size: 0.875rem;
  margin: 0 0 var(--space-2xl);
}

.doc h2 {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.35;
  margin: var(--space-2xl) 0 var(--space-md);
  scroll-margin-top: 80px;
}

.doc h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: var(--space-xl) 0 var(--space-sm);
}

.doc p,
.doc li {
  max-width: var(--measure);
}

.doc ul,
.doc ol {
  padding-inline-start: var(--space-xl);
}

.doc li {
  margin-block: var(--space-sm);
}

.doc a {
  color: var(--primary);
  text-underline-offset: 3px;
}

.toc {
  max-width: var(--measure);
  margin: 0 0 var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  background: var(--surface-container-low);
  border: 1px solid var(--outline-variant);
}

.toc h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--on-surface-variant);
  margin: 0 0 var(--space-sm);
}

.toc ol {
  margin: 0;
  padding-inline-start: var(--space-xl);
  columns: 2;
  column-gap: var(--space-xl);
}

@media (max-width: 640px) {
  .toc ol {
    columns: 1;
  }
}

.toc li {
  margin-block: var(--space-xs);
  break-inside: avoid;
}

.callout {
  max-width: var(--measure);
  margin-block: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--radius-md);
  border: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
}

.callout--accent {
  background: var(--primary-container);
  border-color: transparent;
  color: var(--on-primary-container);
}

.callout--warn {
  background: var(--tertiary-container);
  border-color: transparent;
  color: var(--on-tertiary-container);
}

.callout > :first-child {
  margin-top: 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--space-lg);
  font-size: 0.9375rem;
}

th,
td {
  text-align: start;
  padding: var(--space-md);
  border-bottom: 1px solid var(--outline-variant);
  vertical-align: top;
}

th {
  font-weight: 700;
  color: var(--on-surface-variant);
  font-size: 0.8125rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.table-scroll {
  overflow-x: auto;
}

/* ---------------------------------------------------------------- steps */

.steps {
  list-style: none;
  counter-reset: step;
  margin: var(--space-xl) 0;
  padding: 0;
  display: grid;
  gap: var(--space-lg);
}

.steps > li {
  counter-increment: step;
  position: relative;
  padding: var(--space-lg) var(--space-xl);
  padding-inline-start: calc(var(--space-4xl) + var(--space-sm));
  border-radius: var(--radius-md);
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  max-width: none;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: var(--space-xl);
  top: var(--space-lg);
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 700;
  font-size: 0.875rem;
}

.steps h3 {
  margin-top: 0;
}

.steps > li > :last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------- details */

details {
  border: 1px solid var(--outline-variant);
  border-radius: var(--radius-md);
  background: var(--surface-container-lowest);
  margin-block: var(--space-md);
}

details[open] {
  background: var(--surface-container-low);
}

summary {
  cursor: pointer;
  padding: var(--space-lg) var(--space-xl);
  font-weight: 600;
  list-style-position: inside;
}

details > :not(summary) {
  padding-inline: var(--space-xl);
  margin-block: 0 var(--space-lg);
}

/* --------------------------------------------------------------- footer */

.footer {
  margin-top: var(--space-4xl);
  padding-block: var(--space-2xl);
  border-top: 1px solid var(--outline-variant);
  background: var(--surface-container-low);
  color: var(--on-surface-variant);
  font-size: 0.875rem;
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-xl);
  align-items: center;
  justify-content: space-between;
}

.footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.footer a {
  color: inherit;
  text-decoration: none;
}

.footer a:hover {
  color: var(--on-surface);
  text-decoration: underline;
}

/* ----------------------------------------------------- invite / 404 page */

.centered {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding-block: var(--space-3xl);
  text-align: center;
}

.centered .card {
  max-width: 34rem;
  padding: var(--space-2xl);
}

.centered h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  margin: 0 0 var(--space-md);
}

.code-chip {
  display: inline-block;
  margin-block: var(--space-lg);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  background: var(--primary-container);
  color: var(--on-primary-container);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ RTL */

[dir='rtl'] .hero h1,
[dir='rtl'] .doc h1 {
  letter-spacing: 0;
}

[dir='rtl'] .code-chip {
  direction: ltr;
}

[dir='rtl'] .toc ol {
  list-style-type: arabic-indic;
}

/* ------------------------------------------------------------- utilities */
/*
 * A short list on purpose. These exist so no page needs a `style` attribute, which
 * is what lets the Content-Security-Policy in `_headers` refuse inline styles
 * outright instead of allowing them everywhere.
 */

.u-flush {
  margin: 0;
}

.u-muted {
  color: var(--on-surface-variant);
}

.u-small {
  font-size: 0.875rem;
}

.u-note {
  font-size: 0.9375rem;
  margin-top: var(--space-xl);
}

.btn-row--center {
  justify-content: center;
}

.u-gap-top {
  margin-top: var(--space-xl);
}

.card__logo {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-md);
  margin: 0 auto var(--space-lg);
}