/*
 * Shared styles for the Diccionario pages.
 *
 * Colours are the app's own design tokens, converted from the OKLCH values in
 * Diccionario/DesignSystem/DesignTokens.swift so the site and the app agree.
 * The serif headings echo the app's serif headwords.
 *
 * The app itself is light-only (UIUserInterfaceStyle = Light); the web pages
 * are not, because a privacy policy gets read at all hours and there is no
 * brand reason to force a bright page on someone at midnight.
 */

:root {
  --bg: #f4f2f1;          /* AshBrown.s50  */
  --surface: #ffffff;
  --fg: #241e1c;          /* foreground    */
  --muted: #716a67;       /* mutedForeground, 4.75:1 on --bg */
  --border: #ded5d2;
  --link: #2f6a5c;        /* JungleTeal.s700, 5.64:1 on --bg */
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1917;        /* AshBrown.s900 */
    --surface: #241e1c;
    --fg: #e8e5e3;        /* AshBrown.s100 */
    --muted: #a4988e;     /* AshBrown.s400 */
    --border: #39322d;    /* AshBrown.s800 */
    --link: #95d0c2;      /* JungleTeal.s300 — lifted for dark backgrounds */
  }
}

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

body {
  margin: 0 auto;
  max-width: 36rem;
  padding: 3rem 1.25rem 5rem;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 {
  font-family: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  line-height: 1.25;
  font-weight: 600;
}

h1 { font-size: 2rem; margin: 0 0 .25rem; letter-spacing: -0.01em; }
h2 { font-size: 1.25rem; margin: 2.75rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 1.75rem 0 .4rem; }

p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
li { margin: .35rem 0; }

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

/* Skip link: visible only once focused, so keyboard users get past the nav. */
.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--fg);
  padding: .5rem .75rem; border-radius: 6px; border: 1px solid var(--border);
}
.skip:focus { left: 1rem; top: 1rem; }

.tagline {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 2.5rem;
}

.updated {
  color: var(--muted);
  font-size: .9rem;
  margin: 0 0 2.5rem;
}

.lede { font-size: 1.05rem; }

/* Question/answer blocks on the support page. */
.qa { border-top: 1px solid var(--border); padding-top: 1.25rem; margin-top: 1.25rem; }
.qa h3 { margin-top: 0; }
.qa p:last-child { margin-bottom: 0; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  margin: 1.5rem 0;
}
.card p:last-child { margin-bottom: 0; }

nav.pages {
  margin-top: 3.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: .95rem;
}
nav.pages a { margin-right: 1.25rem; display: inline-block; }

footer {
  margin-top: 3rem;
  color: var(--muted);
  font-size: .85rem;
}

/* The one place the app's own voice shows up: a headword sample. */
.word {
  font-family: ui-serif, Georgia, "Iowan Old Style", serif;
  font-size: 1.35rem;
  font-weight: 600;
}
.ipa { color: var(--muted); font-size: 1rem; }