/*
 * Single source of truth for color / font tokens on this site.
 * Loaded FIRST (before the vendored designer CSS) — every other stylesheet
 * and every React inline style should reference these `--brand-*` custom
 * properties rather than repeating hex literals. The mirror of this file for
 * JS/TS code (React inline styles, the skill-tile glow table, etc.) is
 * `src/styles/tokens.ts` — keep the two in sync by hand; there are only a
 * handful of values.
 *
 * This *replaces* the `:root{...}` block that used to live at the top of the
 * vendored `styles.css` (moved here, not duplicated) and adds the values the
 * designer called out but never centralized (hero title pink, VIP pill
 * green, the theme-color meta value).
 *
 * iOS/Android reconciliation (#592 AC "colors reconciled against iOS/Android
 * theme tokens" — apps/ios/Tadam/UI/Theme/TadamColors.swift,
 * apps/android/.../ui/theme/Color.kt): three of the site's brand colors are
 * the exact same hex as existing app design-system tokens, confirming they
 * share one brand family:
 *   --brand-pink   #EE7BF9  ==  iOS TadamColors.brandPink
 *   --brand-orange #FFA070  ==  iOS TadamColors.brandOrange
 *   --brand-blue   #7BDEFC  ==  iOS TadamColors.brandBlue
 * The remaining site-only tokens below (ink/mint/paper/hero-pink/vip-green/
 * theme) don't have an exact app-token match today — they're landing-page-
 * specific per the designer, not re-derived from screenshots. Left as-is
 * rather than silently snapped to the nearest app color, which would be an
 * unrequested design change beyond this port.
 */

@font-face {
  font-family: 'Rubik';
  src: url('/assets/rubik-bold.woff') format('woff');
  font-weight: 600 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans';
  src: url('/assets/google-sans-hebrew-latin.woff') format('woff');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Moved from the vendored styles.css :root block (unchanged values). */
  --ink: #14132e;
  --paper: #fffdfa;
  --mint: #00efaa;
  --pink: #ff80df;
  --font: 'Google Sans', Arial, sans-serif;
  --font-display: 'Rubik', Arial, sans-serif;
  --px: 50%;
  --py: 40%;
  --scroll: 0;
  --hero-shift: 0px;

  /* Newly centralized — previously inline hex literals in updates.css/
     surprise.css/index.html, per the designer's called-out brand values. */
  --brand-hero-pink: #ffb4eb;   /* hero h1 first title line */
  --brand-vip-green: #a8fc77;   /* VIP-offer pill background */
  --brand-theme: #c5b6ff;       /* <meta name="theme-color"> */
  --brand-pink: #ee7bf9;        /* hero background base == iOS brandPink */
  --brand-orange: #ffa070;      /* aurora/gradient end == iOS brandOrange */
  --brand-blue: #7bdefc;        /* surprise-quote palette == iOS brandBlue */
}