/*
 * Funny Friend — web design system.
 *
 * The tokens below are the SAME values as the iOS app's Theme.swift, so the two
 * surfaces cannot drift into looking like different products. If a colour
 * changes there, change it here in the same commit.
 *
 * Plain CSS on purpose: npm is not used on this estate, so there is no build
 * step, no lockfile to rot and nothing to install before the site renders.
 */

:root {
  /* Brand — "clay": warm terracotta, deliberately not pink or red. */
  --brand: #C2502F;
  --brand-deep: #A03F23;
  --brand-accent: #C98A2B;
  --brand-gold: #B8801F;

  /* Semantic */
  --success: #3F7D62;
  --warning: #B07515;
  --danger: #A8352C;
  --info: #45529E;

  /* Surfaces — warm-tinted neutrals; pure grey looks dirty beside the clay. */
  --surface: #FAF7F3;
  --surface-secondary: #FFFFFF;
  --surface-tertiary: #F2EDE6;
  --surface-grouped: #F4F0EA;
  --separator: #E2DAD0;
  --fill: #E8E1D8;

  /* Text */
  --text-primary: #1A1613;
  --text-secondary: #6B615A;
  --text-tertiary: #9C9188;
  --text-inverse: #FFFFFF;

  /* Spacing — the iOS scale */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --measure: 68ch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #E06A44;
    --brand-deep: #C2502F;
    --brand-accent: #E8A33D;
    --brand-gold: #E8B45A;

    --success: #6BA292;
    --warning: #E0A244;
    --danger: #D65A4E;
    --info: #8492E8;

    --surface: #121011;
    --surface-secondary: #1C191B;
    --surface-tertiary: #262225;
    --surface-grouped: #0C0B0C;
    --separator: #322D31;
    --fill: #2A262A;

    --text-primary: #F6F1EC;
    --text-secondary: #A79C96;
    --text-tertiary: #6F6560;
  }
}

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--text-primary);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* Editorial serif for headings — the same face the app uses for display text. */
h1, h2, h3, .wordmark {
  font-family: ui-serif, "New York", Georgia, "Times New Roman", serif;
  line-height: 1.2;
  color: var(--text-primary);
}

h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem); margin: 0 0 var(--space-md); }
h2 { font-size: clamp(1.4rem, 1.2rem + 1vw, 1.9rem); margin: var(--space-xl) 0 var(--space-sm); }
h3 { font-size: 1.15rem; margin: var(--space-lg) 0 var(--space-xs); }

p, li { color: var(--text-primary); }
a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }

:where(a, button):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

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

/* ── Header ─────────────────────────────────────────────────────────────── */

.site-header {
  border-bottom: 1px solid var(--separator);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: center;
  justify-content: space-between;
  /* Small, because the links below carry their own 44px tap height — stacking
     both would make the sticky header eat the screen on a phone. */
  padding-block: var(--space-xxs);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
}

.wordmark span { color: var(--brand); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-size: 0.95rem;
}

/* 44px is the minimum comfortable touch target on both platforms. Measured on
   real device metrics these links were 24px tall — legible but genuinely hard
   to hit. The padding grows the HIT AREA only; the text stays the same size.
   Inline links inside body copy are deliberately left alone: they are part of a
   sentence, where a tall hit box would overlap the lines around it. */
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-secondary);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--brand); }


/* ── Content ────────────────────────────────────────────────────────────── */

main { padding-block: var(--space-xl) var(--space-xxl); }

.prose { max-width: var(--measure); }
.prose p, .prose li { margin-block: var(--space-sm); }
.prose ul { padding-left: 1.2em; }

.lede {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: var(--measure);
}

.meta {
  font-size: 0.9rem;
  color: var(--text-tertiary);
  margin-bottom: var(--space-lg);
}

.card {
  background: var(--surface-secondary);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-block: var(--space-md);
}

.notice {
  border-left: 4px solid var(--brand);
  background: var(--surface-tertiary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-md);
  margin-block: var(--space-lg);
}

.notice strong { color: var(--brand-deep); }

table { border-collapse: collapse; width: 100%; margin-block: var(--space-md); }
th, td {
  text-align: left;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--separator);
  vertical-align: top;
}
th { color: var(--text-secondary); font-weight: 600; font-size: 0.9rem; }

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--separator);
  padding-block: var(--space-lg) var(--space-xl);
  color: var(--text-tertiary);
  font-size: 0.9rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.site-footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.site-footer a { color: var(--text-secondary); text-decoration: none; }
.site-footer a:hover { color: var(--brand); }

/* ── Buttons ────────────────────────────────────────────────────────────── */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44px minimum touch target, same rule as the nav links above. */
  min-height: 44px;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--text-inverse);
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 1rem;
}

.button:hover { background: var(--brand-deep); color: var(--text-inverse); }

/* Apple require their own mark and wording, in their own colours — this is
   deliberately NOT the brand button. */
.button--apple {
  background: #000;
  color: #FFF;
}

.button--apple:hover { background: #1A1A1A; color: #FFF; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .button--apple {
    background: #FFF;
    color: #000;
  }
  :root:not([data-theme="light"]) .button--apple:hover { background: #E8E8E8; color: #000; }
}

/* ── The app surface (sign in, get the app) ─────────────────────────────── */
/*
 * One narrow column, centred. Someone here is trying to DO something, so there
 * is no marketing navigation to wander into.
 */

.app-shell {
  width: min(100% - 2 * var(--space-md), 30rem);
  margin-inline: auto;
  padding-block: var(--space-xxl) var(--space-xl);
}

.app-shell .wordmark { margin-bottom: var(--space-xl); }

.app-shell h1 { margin-bottom: var(--space-sm); }

.app-footer {
  width: min(100% - 2 * var(--space-md), 30rem);
  margin-inline: auto;
  padding-block: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--separator);
  color: var(--text-tertiary);
  font-size: 0.9rem;
}

.app-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-xs);
}

.app-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--text-secondary);
  text-decoration: none;
}

.app-footer a:hover { color: var(--brand); }