/* ============================================================================
   Byte design tokens — MIRRORED FROM THE APP, NOT INVENTED.
   ----------------------------------------------------------------------------
   Every value below is copied verbatim from
   `frontend/app/theme/colors.ts` (COLORS plus the mascot palette).

   If you change a colour in the app, change it here. Nothing on this site may
   introduce a colour the app does not have: the whole point of the device
   renders is that a visitor sees what they will actually install.

   Typography is likewise the app's real stack, loaded by App.tsx:
     @expo-google-fonts/funnel-display   -> Funnel Display 400/500/600/700
     @expo-google-fonts/jetbrains-mono   -> JetBrains Mono 400/500/700
   ========================================================================== */

/* ---- self-hosted fonts ----------------------------------------------------
   The app's two families, served from THIS site: no visitor data reaches
   Google, no fonts host in the CSP, nothing in the privacy policy about it.
   Both files are Google's own latin-subset VARIABLE builds, so one file per
   family carries every weight the site uses (400/500/600/700 UI, 400/500/700
   mono). If a glyph outside latin ever renders in a fallback font, swap in
   the latin-ext builds the same way. */

@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('../fonts/funnel-display.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono.woff2') format('woff2');
}

:root {
  /* ---- surfaces (COLORS.bg0..bg3) ---------------------------------------- */
  --bg0: #0F1733;   /* app background, phone screen base, ink on bright fills */
  --bg1: #16204A;   /* card gradient bottom */
  --bg2: #1E2A5C;   /* card gradient top, XP pill, nav pill, raised surfaces  */
  --bg3: #283676;   /* highest surface: option badges, icon tiles            */

  /* ---- strokes ----------------------------------------------------------- */
  --stroke: #2A3870;
  --stroke-soft: rgba(140, 165, 240, 0.18);
  --stroke-bright: rgba(140, 165, 240, 0.32);

  /* ---- text -------------------------------------------------------------- */
  --text-hi: #EAF0FF;
  --text-mid: #A9B5DE;
  --text-low: #6878A8;
  --text-dim: #4A5683;

  /* ---- brand periwinkle. This is Byte's RESTING and ACTION colour. -------- */
  --accent: #8FA8FF;
  --accent-bright: #B8CBFF;
  --accent-deep: #5B7CE6;
  --accent-glow: rgba(143, 168, 255, 0.45);

  /* ---- primary CTA gradient (COLORS.ctaFrom/ctaTo/onCta) ------------------ */
  --cta-from: #6A80DF;
  --cta-to: #93A4F5;
  --on-cta: #0B1024;

  /* ---- semantic ---------------------------------------------------------- */
  --good: #9FE8C2;          /* CORRECT ANSWER / mastered. Not "membership".    */
  --good-deep: #5DB893;
  --good-glow: rgba(159, 232, 194, 0.40);
  --good-bg: rgba(159, 232, 194, 0.10);
  --bad: #FF6B7A;           /* WRONG ANSWER. The app does use red.             */
  --bad-deep: #D14155;
  --bad-bg: rgba(255, 107, 122, 0.12);
  --warn: #FFB28F;          /* the BEST-streak stat tile                       */
  --gold: #F5D78A;          /* the XP stat tile                                */
  --gold-deep: #C9A24C;

  /* ---- streak flame ramp (the daily-streak celebration) ------------------- */
  --flame: #FFB259;
  --flame-hot: #FF8A4C;
  --flame-core: #FFE39A;

  /* ---- code syntax (the in-app Python tokenizer) -------------------------- */
  --code-keyword: #C7A2FF;  /* for/in/if/def/return/None/True...               */
  --code-builtin: #FFD08A;  /* print/range/len/sorted...                       */
  /* strings render --good, numbers render --bad, comments --text-low,
     punctuation --text-mid, identifiers --text-hi. See QuestionUI tokenize(). */

  /* ---- the koala mascot palette ------------------------------------------- */
  --koala-body: #A8B8E6;
  --koala-shade: #7B8FCC;
  --koala-belly: #D4DCF0;
  --koala-bandana: #FBE6DA;
  --koala-bandana-ink: #5A2E1E;
  --koala-ink: #1A1F38;

  /* ---- type -------------------------------------------------------------- */
  --font-ui: 'Funnel Display', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- rhythm ------------------------------------------------------------ */
  --gutter: 26px;
  --wrap: 1140px;
  --wrap-narrow: 760px;
}

/* The app draws a dot grid over a periwinkle wash on every screen
   (components/Background.tsx). Reused for both the page and the phone. */
:root {
  --dot-grid:
    radial-gradient(circle at 1px 1px, rgba(143, 168, 255, 0.10) 1px, transparent 0);
  --dot-grid-size: 22px 22px;
}