/* Design tokens for the Eazdrop web reader.
 *
 * The Figma file binds no variables (get_variable_defs returns {}), so these
 * are lifted from the raw values in the design and named here. This file is
 * the single source of truth: card templates must reference tokens, never
 * literal hex, so a palette change lands in one place. */

:root {
  /* ---- Surfaces ------------------------------------------------------- */
  --bg-page: #0d0010;
  --surface-card: rgba(31, 0, 36, 0.05);
  --surface-panel: #28002e;
  --surface-panel-border: #310038;
  --surface-raised: rgba(255, 255, 255, 0.08);
  --surface-raised-border: rgba(255, 255, 255, 0.15);

  /* ---- Brand ---------------------------------------------------------- */
  --accent: #df00fd;
  --accent-deep: #370a77;
  --accent-12: rgba(223, 0, 253, 0.12);
  --accent-20: rgba(223, 0, 253, 0.2);
  --accent-32: rgba(223, 0, 253, 0.32);
  --accent-55: rgba(223, 0, 253, 0.55);
  --gradient-cta: linear-gradient(90deg, var(--accent-deep) 0%, var(--accent) 100%);

  /* ---- State ---------------------------------------------------------- */
  --state-live: #41ff76;
  --state-live-dot: #05df72;
  --state-locked: #ff23dc;
  --state-paid: #ffb020;

  /* Avatar seeds used in message previews. */
  --seed-violet: #7c3aed;
  --seed-cyan: #0891b2;
  --seed-green: #059669;

  /* ---- Text ----------------------------------------------------------- */
  --text: #ffffff;
  --text-72: rgba(255, 255, 255, 0.72);
  --text-70: rgba(255, 255, 255, 0.7);
  --text-65: rgba(255, 255, 255, 0.65);
  --text-60: rgba(255, 255, 255, 0.6);
  --text-50: rgba(255, 255, 255, 0.5);
  --text-20: rgba(255, 255, 255, 0.2);

  /* ---- Lines & overlays ----------------------------------------------- */
  --hairline: rgba(255, 255, 255, 0.05);
  --overlay-strong: rgba(13, 0, 15, 0.82);
  --overlay-soft: rgba(13, 0, 15, 0.55);
  --skeleton-strong: rgba(255, 255, 255, 0.2);
  --skeleton-weak: rgba(255, 255, 255, 0.1);

  /* ---- Cover gradients ------------------------------------------------ */
  --cover-blue: linear-gradient(163.07deg, #0d47a1 6.17%, #1a237e 93.83%);

  /* ---- Geometry ------------------------------------------------------- */
  /* Width of a card as drawn in Figma. The page adds --page-gutter on each
   * side on top of this, so the card itself always measures --content-width. */
  --content-width: 624px;
  --page-gutter: 12px;
  --radius-card: 16px;
  --radius-panel: 12px;
  --radius-pill: 999px;
  --radius-cta: 36px;
  --card-pad: 16px;

  /* ---- Type ----------------------------------------------------------- */
  /* The mobile app ships no font assets and never sets ThemeData.fontFamily,
   * so Flutter falls through to each platform's own UI face: San Francisco on
   * iOS, Roboto on Android. `system-ui` is the CSS generic that resolves to
   * exactly those, so the reader matches the app on the two platforms that
   * matter without downloading anything.
   *
   * -apple-system covers Safari < 11, which predates system-ui. The named
   * families after it are belt-and-braces for browsers that recognise neither.
   * The emoji families sit AFTER sans-serif deliberately: sans-serif always
   * matches, so they are only ever consulted for codepoints the UI face lacks.
   *
   * Display and body are one stack because the app has one. They stay two
   * tokens so re-introducing a display face is a one-line change here rather
   * than an edit to ~45 call sites. */
  --font-system:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
    "Noto Color Emoji";
  --font-display: var(--font-system);
  --font-body: var(--font-system);
}