/* Amaal ZA website. The colours, fonts and shapes are the app's own
   (packages/ui/src/tokens.ts, docs/common/22-design.md): near black and bone
   brown in the dark theme, white with warm bone cards in the light one. The
   fonts are served from this site, so no other site is asked for anything. */

@font-face {
  font-family: 'Gilda Display';
  src: url('GildaDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Urbanist';
  src: url('Urbanist-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Urbanist';
  src: url('Urbanist-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Urbanist';
  src: url('Urbanist-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: dark light;
  --background: #101010;
  --surface: #1e1e1e;
  --raised: #2a2622;
  --text: #ffffff;
  --text-muted: #b9b1a5;
  --primary: #8b704e;
  --on-primary: #ffffff;
  --accent: #c8ad85;
  --border: #3a342c;
  --glow: rgba(139, 112, 78, 0.34);
  --pattern-opacity: 0.1;
  --pattern-filter: none;
  --radius-md: 16px;
  --radius-lg: 24px;
}

@media (prefers-color-scheme: light) {
  :root {
    --background: #ffffff;
    --surface: #f8f3eb;
    --raised: #efe6d8;
    --text: #1b1814;
    --text-muted: #5f574c;
    --primary: #7a6142;
    --on-primary: #ffffff;
    --accent: #6f573a;
    --border: #dccfbc;
    --glow: rgba(122, 97, 66, 0.16);
    --pattern-opacity: 0.08;
    --pattern-filter: invert(1);
  }
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  min-height: 100vh;
  /* The bone brown glow behind every screen of the app. */
  background-image: radial-gradient(60rem 34rem at 85% -10%, var(--glow), transparent 70%);
  background-repeat: no-repeat;
}

a {
  color: var(--accent);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--text);
}
a:focus-visible,
.button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 28px 0 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text);
  text-decoration: none;
}
.brand img {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.brand span {
  font-family: 'Gilda Display', Georgia, serif;
  font-size: 28px;
  letter-spacing: 0.01em;
}
.site-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.site-nav a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid transparent;
}
.site-nav a:hover {
  color: var(--text);
  border-color: var(--border);
}
.site-nav a[aria-current='page'] {
  color: var(--text);
  background: var(--raised);
  border-color: var(--border);
}

/* The bone card, as on the app's Home screen */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  margin: 12px 0 28px;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('pattern.png') center / 480px auto repeat;
  opacity: 0.16;
  pointer-events: none;
}
.hero > * {
  position: relative;
}
.hero .eyebrow {
  font-weight: 500;
  font-size: 15px;
  opacity: 0.9;
  margin: 0 0 8px;
}
.hero h1 {
  font-family: 'Gilda Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.12;
  margin: 0 0 14px;
}
.hero p {
  margin: 0;
  max-width: 34em;
  font-size: 18px;
}
.hero .note {
  display: inline-block;
  margin-top: 22px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
}

/* Cards */
.card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  margin: 0 0 20px;
}
.card.patterned::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('pattern.png') center / 480px auto repeat;
  opacity: var(--pattern-opacity);
  filter: var(--pattern-filter);
  pointer-events: none;
}
.card > * {
  position: relative;
}

h1,
h2,
h3 {
  font-family: 'Gilda Display', Georgia, serif;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
}
.page-title {
  font-size: clamp(32px, 5.5vw, 46px);
  margin: 18px 0 6px;
}
.page-meta {
  color: var(--text-muted);
  margin: 0 0 24px;
}
h2 {
  font-size: 28px;
  margin: 0 0 12px;
}
h3 {
  font-family: 'Urbanist', system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 22px 0 6px;
}
p {
  margin: 0 0 14px;
}
ul,
ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
li {
  margin: 0 0 8px;
}
li::marker {
  color: var(--accent);
}
strong {
  font-weight: 600;
}
.muted {
  color: var(--text-muted);
}

/* Feature tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 20px;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
}
.tile h3 {
  margin: 0 0 6px;
  font-size: 19px;
}
.tile p {
  margin: 0;
  color: var(--text-muted);
}

/* Tables */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  min-width: 520px;
}
th,
td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
th {
  background: var(--raised);
  font-weight: 600;
}
tr:last-child td {
  border-bottom: 0;
}

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.button:hover {
  color: var(--on-primary);
  filter: brightness(1.08);
}
.button.quiet {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 28px;
  padding: 24px 0 40px;
  color: var(--text-muted);
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.site-footer nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.site-footer a {
  color: var(--text-muted);
}

@media (max-width: 560px) {
  body {
    font-size: 16px;
  }
  .hero {
    padding: 30px 22px;
  }
  .card {
    padding: 22px 20px 18px;
  }
  .brand span {
    font-size: 24px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .site-nav a,
  .button {
    transition:
      color 0.15s ease,
      background-color 0.15s ease,
      border-color 0.15s ease,
      filter 0.15s ease;
  }
}