/* Sophie Mini Apps — design tokens.
 *
 * One palette, two themes, chosen by `data-theme` on <html> (ui.js sets it from
 * tg.colorScheme, then from prefers-color-scheme, then from ?scheme= for plain
 * browser testing). Telegram's own theme variables are NOT the palette any
 * more; they survive only as the very last fallback if this file fails to load.
 *
 * Every foreground/background pair below is checked by scripts/check_contrast.py
 * against WCAG 1.4.3 (4.5:1 body, 3:1 large) and 1.4.11 (3:1 UI boundaries).
 * If you change a colour, run that script.
 *
 * Deliberately avoided so old Android WebViews render this correctly:
 * color-mix(), :has(), dvh/svh units, container queries, nesting.
 */

:root {
  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-num: "Manrope", ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-micro: 11px;
  --fs-tiny: 12px;
  --fs-small: 13px;
  --fs-body: 15px;
  --fs-lead: 17px;
  --fs-title: 20px;
  --fs-display: 24px;
  --fs-band: 32px;
  --fs-band-hero: 44px;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --lh-prose: 1.65;

  /* Manrope is geometric and wide; display sizes need negative tracking to
     stop reading as loose. Floor is -0.03em: past that the counters close. */
  --tr-display: -0.03em;
  --tr-title: -0.02em;
  --tr-body: -0.005em;

  /* ── Space (4/8 grid) ─────────────────────────────────────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px;

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --r-sm: 10px;
  --r-btn: 14px;
  --r-card: 16px;
  --r-pill: 999px;

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --dur-1: 120ms;   /* press, hover                */
  --dur-2: 180ms;   /* view + state changes        */
  --dur-3: 280ms;   /* reveal, sheet               */
  --dur-4: 620ms;   /* the three peak moments only */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1);

  /* ── Layout ───────────────────────────────────────────────────────────── */
  --page: 620px;
  --tabbar-h: 60px;
  --dock-h: 0px;                 /* raised by pages that mount a bottom dock */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --tap: 44px;                   /* minimum tap target                      */
}

/* ── Dark (the default: most learners run Telegram dark) ────────────────── */
:root,
[data-theme="dark"] {
  --bg: #0E151E;
  --surface: #172230;
  --surface-2: #22303F;
  --track: #2C3B4D;
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);

  --text: #EEF3F8;
  --text-2: #9DADBF;
  --text-3: #7488A0;

  --accent: #FF7A1A;            /* fills, bars, the current thing           */
  --accent-text: #FF9552;       /* accent as small text                     */
  --on-accent: #12181F;
  --accent-soft: rgba(255, 122, 26, 0.16);
  --accent-line: rgba(255, 122, 26, 0.38);

  --good: #3ED598;
  --good-text: #3ED598;
  --good-soft: rgba(62, 213, 152, 0.15);

  --danger: #FF6B6B;
  --danger-text: #FF6B6B;
  --on-danger: #12181F;
  --danger-soft: rgba(255, 107, 107, 0.15);

  --gold: #F5C24B;
  --gold-soft: rgba(245, 194, 75, 0.15);

  /* Chart series. Overall is the accent; the four criteria are distinguishable
     from each other and from the accent, in both themes. */
  --s-fc: #4CC2FF;
  --s-lr: #C08CFF;
  --s-gra: #FFD166;
  --s-pron: #FF8FA3;

  /* Dark elevates with surface + hairline, never with a shadow. */
  --shadow: none;
  --shadow-lift: none;
  --card-border: 1px solid var(--line);
  --skeleton: rgba(255, 255, 255, 0.07);
  --scrim: rgba(6, 10, 15, 0.62);
}

/* ── Light ──────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  --bg: #F1F4F9;
  --surface: #FFFFFF;
  --surface-2: #E8EDF4;
  --track: #D8E0EA;
  --line: rgba(15, 27, 42, 0.10);
  --line-strong: rgba(15, 27, 42, 0.18);

  --text: #0F1B2A;
  --text-2: #55637A;
  --text-3: #6E7D93;

  --accent: #C2410C;
  --accent-text: #A94800;
  --on-accent: #FFFFFF;
  --accent-soft: rgba(194, 65, 12, 0.10);
  --accent-line: rgba(194, 65, 12, 0.30);

  --good: #0F7A55;
  --good-text: #0B6B49;
  --good-soft: rgba(15, 122, 85, 0.10);

  --danger: #B62D28;
  --danger-text: #B62D28;
  --on-danger: #FFFFFF;
  --danger-soft: rgba(182, 45, 40, 0.10);

  --gold: #7A5A00;
  --gold-soft: rgba(122, 90, 0, 0.10);

  --s-fc: #0B6BA8;
  --s-lr: #6B3FA0;
  --s-gra: #8A6300;
  --s-pron: #B12B4A;

  /* Light elevates with a navy-tinted shadow, never with a shadow + border. */
  --shadow: 0 1px 2px rgba(15, 27, 42, 0.05), 0 10px 24px -16px rgba(15, 27, 42, 0.22);
  --shadow-lift: 0 2px 6px rgba(15, 27, 42, 0.07), 0 18px 36px -20px rgba(15, 27, 42, 0.28);
  --card-border: 0 none;
  --skeleton: rgba(15, 27, 42, 0.06);
  --scrim: rgba(15, 27, 42, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms;
  }
}