/* apps/animate/tokens.css — Playful Jackbox mood */

:root {
  /* Telegram theme-driven core */
  --c-bg:          var(--tg-theme-bg-color, #fff9f0);
  --c-bg-elevated: var(--tg-theme-secondary-bg-color, #fff2dd);
  --c-text:        var(--tg-theme-text-color, #171410);
  --c-text-muted:  var(--tg-theme-hint-color, #8a8074);

  /* App-owned chrome — bold marker-red accent, thick ink outlines */
  --c-accent:      #ff5a36;
  --c-accent-fg:   #fff9f0;
  --c-ink:         #171410;
  --c-line:        #e8dfd0;

  /* Drawing palette — the 5-7 colors the user paints with (mockup shows 7) */
  --palette-1: #171410; /* black */
  --palette-2: #ff5a36; /* red-orange */
  --palette-3: #ffc93c; /* yellow */
  --palette-4: #4fb477; /* green */
  --palette-5: #3d8bff; /* blue */
  --palette-6: #a35bff; /* purple */
  --palette-7: #ff6fb0; /* pink */

  /* Shape — chunky rounded, thick outline is the signature */
  --r-card: 16px;
  --r-sm:   10px;
  --r-pill: 999px;
  --bw-thick: 2.5px;

  /* Spacing (8-base) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 40px;

  /* Type */
  --fs-label:   12px;
  --fs-caption: 13px;
  --fs-body:    16px;
  --fs-title:   20px;
  --fs-display: 28px; /* step indicator, "Отправлено!" */

  /* Sizes */
  --sz-icon:   56px; /* success/error mark on send-status */
  --sz-swatch: 28px; /* palette color circle */
  --tap-min:   44px;

  --font-display: 'Fredoka', var(--font-body);
  --font-body: -apple-system, "SF Pro Text", ui-sans-serif, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
  --c-bg:          var(--tg-theme-bg-color, #17140f);
  --c-bg-elevated: var(--tg-theme-secondary-bg-color, #221d15);
  --c-text:        var(--tg-theme-text-color, #fbf5ea);
  --c-text-muted:  var(--tg-theme-hint-color, #a89c89);
  --c-accent:      #ff7350;
  --c-accent-fg:   #17140f;
  --c-ink:         #fbf5ea;
  --c-line:        #362f24;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:          var(--tg-theme-bg-color, #17140f);
    --c-bg-elevated: var(--tg-theme-secondary-bg-color, #221d15);
    --c-text:        var(--tg-theme-text-color, #fbf5ea);
    --c-text-muted:  var(--tg-theme-hint-color, #a89c89);
    --c-accent:      #ff7350;
    --c-accent-fg:   #17140f;
    --c-ink:         #fbf5ea;
    --c-line:        #362f24;
  }
}