/*
 * BuyBlock brand tokens for buyblock.app static pages.
 *
 * Source of truth is the app theme (lib/theme.ts); the Fraunces display serif
 * with italic gold emphasis comes from the store screenshots
 * (scripts/screenshots/compose-store-shots.mjs). Server-rendered pages
 * (functions/src/publicReport.ts, reportsIndex.ts) inline the same values.
 * See docs/design-system.md before adding a colour.
 */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,600;1,9..144,600&display=swap');

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg-primary: #101014;
  --bg-secondary: #1a1a22;
  --bg-tertiary: #252530;
  --bg-overlay: rgba(16, 16, 20, 0.88);
  --card-bg: #1a1a22;
  --card-border: rgba(255, 255, 255, 0.08);

  /* Text */
  --text-primary: #f0f0f0;
  --text-secondary: #a0a0b0;
  --text-tertiary: #8a8a9a;

  /* Accents: lavender = interactive, gold = value/emphasis */
  --accent-lavender: #8b9fc7;
  --accent-lavender-dim: rgba(139, 159, 199, 0.12);
  --accent-lavender-glow: rgba(139, 159, 199, 0.16);
  --accent-lavender-line: rgba(139, 159, 199, 0.2);
  --accent-gold: #c9a84c;
  --accent-gold-light: #dfc27a;
  --accent-gold-dim: rgba(201, 168, 76, 0.12);
  --accent-gold-glow: rgba(201, 168, 76, 0.16);
  --accent-gold-line: rgba(201, 168, 76, 0.22);

  /* Status */
  --success: #4caf50;
  --danger: #ef5350;

  /* Type */
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

/* Headline voice: serif, with the key phrase in italic gold (store-shot style). */
.headline {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.headline em {
  font-style: italic;
  color: var(--accent-gold);
}

/* Official store badges. The Play PNG ships with built-in clear space
   (visible badge = 168/250 of the image), so it is sized larger and pulled
   in to align with the App Store badge's visible height. */
.store-badges {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.store-badges a { display: inline-flex; line-height: 0; }
.store-badges .badge-apple { height: 48px; width: auto; }
.store-badges .badge-play { height: 71px; width: auto; margin: -11.5px -11px; }
.store-badges a:focus-visible { outline: 2px solid var(--accent-lavender); outline-offset: 4px; border-radius: 10px; }
.text-link {
  color: var(--accent-lavender);
  text-decoration: none;
  font-weight: 500;
}
.text-link:hover { text-decoration: underline; }