/* ------------------------------------------------------------------ *
 * keen marketing — shared page shell (tokens, fonts, brand atoms).
 *
 * Extracted from index.html when /birthdays landed (a second React page
 * rendered from the same bundle) so there is ONE copy of the tokens
 * rather than a copy per page. Loaded by index.html + birthdays.html.
 *
 * Cached at the edge/webview for 4h like every other asset — bump the
 * ?v= on the <link> in BOTH pages whenever this file changes.
 * ------------------------------------------------------------------ */

/* Nunito — marketing display / wordmark voice (Latin ranges only).
   Paths are root-relative: this file lives in /assets, the pages don't. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/nunito-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/nunito-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Keen colour system — source of truth: app/src/theme/colors.ts + design-spec.md (v2).
   `--green` is THE primary action and almost nothing else; amber = social signals only. */
:root {
  --green: #1A7A4C;
  --green-dark: #115C38;
  --green-soft: #EAF6EF;
  --green-text: #2E7D5B;
  --green-border: #D7EEDF;
  --green-tint: #E4F0E7;
  --green-light: #BFDCCB;

  --amber: #E8B84B;
  --amber-tint: #FBF3DC;
  --amber-tint-text: #633806;

  --cream: #FAFAF8;
  --cream-brand: #FAF7F0;
  --card: #FFFFFF;
  --card-border: #F0EFEA;
  --hairline: #F2F1EC;

  --ink: #17211B;
  --muted: #6E6E73;
  --faint: #A0A0A5;
  --white: #FFFFFF;
  --danger: #B3402A;

  /* Families */
  --font-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Nunito", "Avenir Next", var(--font-system);
  --font-body: var(--font-system);

  /* Weights + tracking */
  --weight-extrabold: 800;
  --tracking-wordmark: -0.02em;

  /* Radii */
  --radius-pill: 999px;

  /* Shadows — soft, never obvious */
  --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.06);
  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-marketing: 0 6px 24px rgba(23, 33, 27, 0.08);
  --shadow-lift: 0 14px 40px rgba(23, 33, 27, 0.12);
}

/* Marketing surface. App uses system font; marketing leans on the rounded
   display voice (Nunito → Avenir Next). Warm brand cream, disciplined green. */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--cream-brand);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--green); text-decoration: none; }
a:hover { color: var(--green-dark); }
.display { font-family: var(--font-display); }

/* Wordmark */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-wordmark);
  color: var(--green);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  user-select: none;
}
.wordmark .dot {
  width: 0.18em; height: 0.18em; border-radius: 999px;
  background: var(--amber); display: inline-block;
  margin-left: 0.04em; align-self: flex-end; margin-bottom: 0.12em;
}
.wordmark.reverse { color: var(--cream-brand); }

/* App icon */
.appicon {
  position: relative; background: var(--green); color: var(--cream-brand);
  font-family: var(--font-display); font-weight: var(--weight-extrabold);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.appicon .k { line-height: 1; transform: translateY(0.02em); }
.appicon .dot {
  position: absolute; background: var(--amber); border-radius: 999px;
  top: 26%; right: 24%;
}

#root { overflow-x: hidden; }