/* Disco Fontein — shared site style
   Typography and color language borrowed from elisehe.in:
   serif body copy, Karla for headings/labels, warm off-black dark mode,
   a single pink accent, muted underlined links. */

:root {
  --color-fg: #333;
  --color-bg: #fdfdfb;
  --color-muted: #767676;
  --color-pink: #c33a49;
  --color-yellow: #fff3c4;
  --card-bg: #ffffff;
  --card-border: rgba(0, 0, 0, 0.1);
  --callout-bg: #faf4e9;
  --callout-border: var(--color-pink);
  --font-serif: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans: Karla, Arial, sans-serif;
  --baseline: 1.65rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-fg: #efddc3;
    --color-bg: #161616;
    --color-muted: #a89a86;
    --color-pink: #e8828f;
    --color-yellow: #4a4020;
    --card-bg: #1f1e1c;
    --card-border: rgba(239, 221, 195, 0.16);
    --callout-bg: #23201a;
  }
}

* { box-sizing: border-box; }

::selection { background-color: var(--color-yellow); color: var(--color-pink); }

html { font-size: 100%; }

body {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--color-fg);
  background-color: var(--color-bg);
  transition: background-color 0.3s, color 0.3s;
  padding: calc(var(--baseline) * 1.5) 1.25rem calc(var(--baseline) * 3);
}

.container { max-width: 640px; margin: 0 auto; }

h1, h2, h3 { font-family: var(--font-sans); font-weight: 700; color: var(--color-fg); }

h1 { font-size: 1.85rem; line-height: 1.25; margin: 0 0 0.4rem; }

h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-muted);
  margin-top: calc(var(--baseline) * 1.2);
  margin-bottom: 0.6rem;
}

/* Legal pages use h2 as regular section headers, not just labels —
   give them a touch more presence while keeping the sans/tracked treatment. */
.container > h2 {
  font-size: 1rem;
  color: var(--color-fg);
}

h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-top: 1.25rem;
  margin-bottom: 0.4rem;
}

.tagline {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-pink);
  margin-bottom: 1.75rem;
}

.updated {
  font-family: var(--font-sans);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: 1.75rem;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.15em;
  text-decoration-color: rgba(51, 51, 51, 0.35);
}
@media (prefers-color-scheme: dark) {
  a { text-decoration-color: rgba(239, 221, 195, 0.4); }
}
a:hover, a:focus { color: var(--color-pink); text-decoration-color: currentColor; }
*:focus { outline-color: var(--color-pink); }

strong { font-weight: 700; }

table { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--card-border); }
th { font-family: var(--font-sans); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); }

/* Callout boxes: .short-version (privacy), .intro (health-privacy), .highlight (terms) */
.short-version, .intro, .highlight {
  background: var(--callout-bg);
  border-left: 3px solid var(--callout-border);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  border-radius: 0 8px 8px 0;
}
.short-version p, .intro p, .highlight { font-size: 0.95rem; }
.short-version p:last-child, .intro p:last-child { margin-bottom: 0; }

/* Card-style lists: apps index, legal-doc index, delete-account methods */
.app-list, .link-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.app-list li, .link-list li, .method {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  margin-bottom: 0.75rem;
}
.app-list li { padding: 1.1rem 1.25rem; }
.app-list li strong { display: block; font-family: var(--font-sans); font-size: 1.05rem; margin-bottom: 0.3rem; }
.app-list li .desc { display: block; font-size: 0.9rem; color: var(--color-muted); margin-bottom: 0.7rem; }
.app-list a.app-link, .link-list a { font-family: var(--font-sans); font-size: 0.92rem; }
.app-list a.app-link { text-decoration: none; font-weight: 700; }
.app-list a.app-link:hover { text-decoration: underline; }

.link-list a { display: block; padding: 0.9rem 1.1rem; text-decoration: none; }
.link-list a:hover { color: var(--color-pink); }

.method { padding: 1.25rem; }
.method h2 { font-size: 0.85rem; margin-top: 0; }
.method ol { margin-bottom: 0; }

.values { list-style: none; margin: 1.5rem 0 2rem; padding: 0; }
.values li {
  font-family: var(--font-sans);
  font-size: 0.95rem;
  padding: 0.5rem 0 0.5rem 1.4rem;
  position: relative;
}
.values li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-pink);
}

.soon {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  background: var(--callout-bg);
  border-radius: 4px;
  padding: 0.15rem 0.45rem;
  margin-left: 0.5rem;
  vertical-align: middle;
}

.back {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  color: var(--color-muted);
  text-decoration: none;
  margin-bottom: 1.75rem;
}
.back:hover { color: var(--color-pink); }

footer {
  margin-top: calc(var(--baseline) * 2);
  padding-top: 1.25rem;
  border-top: 1px solid var(--card-border);
  font-family: var(--font-sans);
  font-size: 0.8rem;
  color: var(--color-muted);
}
footer p { margin-bottom: 0.35rem; }
footer a { color: var(--color-muted); text-decoration: underline; text-decoration-color: rgba(118, 118, 118, 0.35); }
footer a:hover { color: var(--color-pink); }