/* GENERATED from ui/src/tokens.css by ui/scripts/build-css.mjs — do not edit.
   Run `npm run build:css` in ui/ after changing a token. */
/* Brand typefaces. bingi.me loads these from Google Fonts at runtime and the
   design system does the same, so a design rendered anywhere gets the real
   Sora/Inter rather than a fallback. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ============================================================================
   Bingi design tokens — the single source of truth for the Bingi brand.

   Canonical values come from bingi.me (the public brand surface). The Bingi
   app's former parallel palette in app/src/theme.ts was reconciled INTO this
   file on 2026-07-30; theme.ts now re-states these same values for React
   Native. If you change a colour here, change it there too.

   Names are deliberately unprefixed (--bg, --accent, …) because that is the
   vocabulary the shipped bingi.me pages already use. Designs built with this
   system therefore use the same variable names as production.
   ========================================================================= */

:root {
  /* --- Surfaces ---------------------------------------------------------- */
  --bg: #0b0e14;          /* page background */
  --bg-card: #131826;     /* default raised surface */
  --bg-card-2: #171d2e;   /* second-level surface, gradient partner to --bg-card */
  --border: rgba(255, 255, 255, 0.08);

  /* --- Text ------------------------------------------------------------- */
  --text: #eef1f8;        /* primary copy */
  --text-dim: #9aa3b8;    /* secondary copy, labels, captions */
  --text-faint: #5b6478;  /* fine print, footers, placeholders */

  /* --- Brand ------------------------------------------------------------ */
  --accent: #34d3a6;      /* Bingi mint — primary brand colour */
  --accent-deep: #2ab890; /* darker mint, gradient partner to --accent */
  --accent-dark: #0f766e; /* deep teal for pressed / low-emphasis fills */
  --accent-ink: #06251c;  /* text colour on an --accent fill */
  --accent-2: #7c6cff;    /* Bingi violet — secondary brand colour */

  /* --- Semantic --------------------------------------------------------- */
  --gold: #eab308;        /* founding-member tier, finale events, highlights */
  --gold-deep: #ca8a04;   /* gradient partner to --gold */
  --gold-ink: #1c1400;    /* text colour on a --gold fill */
  --red: #ff7a7a;         /* errors, "leaving soon", cancellations */

  /* Accent washes — pre-mixed so tints stay consistent across surfaces. */
  --accent-wash: rgba(52, 211, 166, 0.07);
  --accent-edge: rgba(52, 211, 166, 0.35);
  --accent-edge-strong: rgba(52, 211, 166, 0.45);
  --accent-glow: rgba(52, 211, 166, 0.25);
  --accent-2-wash: rgba(124, 108, 255, 0.08);
  --accent-2-edge: rgba(124, 108, 255, 0.30);
  --gold-wash: rgba(234, 179, 8, 0.10);
  --gold-edge: rgba(234, 179, 8, 0.35);
  --gold-glow: rgba(234, 179, 8, 0.30);
  --rule-dashed: rgba(255, 255, 255, 0.07);

  /* --- Shape ------------------------------------------------------------ */
  --radius: 16px;      /* cards, panels */
  --radius-lg: 20px;   /* hero-scale cards (math card, founding card) */
  --radius-sm: 14px;   /* nested surfaces, FAQ rows, ledger */
  --radius-input: 12px;/* inputs and rectangular buttons */
  --pill: 99px;        /* pill buttons, badges, chips */

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Sora', 'Inter', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Layout ----------------------------------------------------------- */
  --container: 1080px;      /* standard page width */
  --container-narrow: 860px;/* text-led pages (cancel guides, story) */
  --measure: 720px;         /* comfortable reading width (FAQ, founding card) */

  /* --- Product semantics ------------------------------------------------
     Calendar event kinds and watchlist priorities. These are the app's
     product vocabulary, expressed in brand tokens rather than a second
     palette. */
  --kind-premiere: var(--accent);
  --kind-binge-drop: var(--accent-2);
  --kind-finale: var(--gold);
  --kind-leaving: var(--red);
  --priority-watching: var(--accent);
  --priority-up-next: var(--gold);
  --priority-someday: var(--text-faint);
}