/* MIRRIM · Figma Design Tokens (web port)
 * Source: /home/mirrim/mirrim-design-system/src/tokens/*
 * Scope: подключается ТОЛЬКО на страницах с body.figma-skin (сейчас — hub.html).
 * Не переопределяет глобальные --bg/--card из theme.css — токены живут в --ds-* namespace.
 */

/* ─────────────────────────────────────────────────────────────
   :root — токены под namespace --ds-*
   ───────────────────────────────────────────────────────────── */
:root {
  /* ─── Палитра (solid colors из figma) ─── */
  --ds-purple-pure:        #ad83ff;  /* брендовый primary */
  --ds-purple:             #642aaf;  /* брендовый dark / pressed */
  --ds-brand-white:        #ffffff;
  --ds-brand-black:        #000000;
  --ds-white:              #fbfbfb;
  --ds-black:              #0d0d0d;
  --ds-black-101010:       #101010;

  /* Labels / fills (iOS HIG) */
  --ds-labels-secondary:   rgba(60, 60, 67, 0.6);   /* #3c3c43 @ 60% */
  --ds-fill-secondary:     rgba(120, 120, 128, 0.16); /* #787880 @ 16% */
  --ds-gray-1:             #333333;
  --ds-light-grey-0:       #fafafc;
  --ds-light-grey-3:       #1e2022;

  /* Категории игр */
  --ds-cat-classic:        #ad83ff;  /* purple_pure */
  --ds-cat-kids-yellow:    #fee857;
  --ds-cat-kids-blue:      #74d2ff;
  --ds-cat-hen:            #ff6635;  /* девичник оранжевый */
  --ds-cat-hen-yellow:     #ffcc24;
  --ds-cat-stag:           #5065ff;  /* мальчишник синий */
  --ds-cat-stag-light:     #9abcff;
  --ds-cat-dating-pink:    #ffa4ba;
  --ds-cat-dating-hot:     #ff3c76;

  /* Status */
  --ds-system-blue:        #007aff;
  --ds-system-red:         #ff3b30;
  --ds-error-primary:      #ff3b30;
  --ds-green-light:        #c5ff61;
  --ds-green-acid:         #84d000;

  /* ─── Градиенты ─── */
  --ds-gradient-purple-button: linear-gradient(180deg, #9f7cff 0%, #7f55f3 32.69%, #9c78fe 100%);
  --ds-gradient-purple-navbar: linear-gradient(180deg, #642aaf 0%, rgba(100, 42, 175, 0) 100%);
  --ds-gradient-purple-linear: linear-gradient(180deg, #9f7cff 0%, #642aaf 100%);
  --ds-gradient-card-violet:   linear-gradient(99deg, #f9f7ff 0%, #c4b0ff 100%);
  --ds-gradient-radial-purple-100: radial-gradient(circle at 50% 50%, #f9f7ff 0%, #c4b0ff 100%);
  --ds-gradient-radial-purple-200: radial-gradient(circle at 50% 50%, #d0c1fb 0%, #956fff 100%);
  --ds-gradient-radial-purple-300: radial-gradient(circle at 50% 50%, #956fff 0%, #642aaf 100%);
  --ds-gradient-radial-lime:   radial-gradient(circle at 50% 50%, #f9ffdd 0%, #c6e634 100%);
  --ds-gradient-radial-red:    radial-gradient(circle at 50% 50%, #ff9387 0%, #ff4b37 100%);

  /* ─── Шрифт (SF Pro → system fallback) ─── */
  --ds-font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                    'SF Pro', 'Onest', 'Inter', 'Segoe UI', Roboto, sans-serif;
  --ds-font-mono:   'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* ─── Spacing (4pt grid) ─── */
  --ds-space-xxs: 4px;
  --ds-space-xs:  8px;
  --ds-space-sm:  12px;
  --ds-space-md:  16px;
  --ds-space-lg:  20px;
  --ds-space-xl:  24px;
  --ds-space-xxl: 32px;
  --ds-space-xxxl: 40px;
  --ds-space-huge: 48px;
  --ds-space-jumbo: 64px;

  /* ─── Radii ─── */
  --ds-radius-none: 0;
  --ds-radius-xs:   4px;
  --ds-radius-sm:   8px;
  --ds-radius-md:   12px;
  --ds-radius-lg:   16px;
  --ds-radius-xl:   20px;
  --ds-radius-xxl:  24px;
  --ds-radius-pill: 9999px;

  /* ─── Shadows ─── */
  --ds-shadow-flat:    none;
  --ds-shadow-card:    0 2px 8px rgba(0, 0, 0, 0.06);
  --ds-shadow-raised:  0 2px 8px rgba(0, 0, 0, 0.06);
  --ds-shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.16);
  --ds-shadow-hover:   0 8px 24px rgba(173, 131, 255, 0.18);
}

/* ─────────────────────────────────────────────────────────────
   Утилитарные типографические классы
   API совпадает с RN <Text variant="..." />
   ───────────────────────────────────────────────────────────── */
.ds-type-large-1-regular     { font-family: var(--ds-font-family); font-weight: 400; font-size: 36px; line-height: 40px; letter-spacing: -0.36px; }
.ds-type-large-1-medium      { font-family: var(--ds-font-family); font-weight: 500; font-size: 36px; line-height: 38px; letter-spacing: -1.44px; }
.ds-type-large-2-regular     { font-family: var(--ds-font-family); font-weight: 400; font-size: 32px; line-height: 36px; letter-spacing: 0; }
.ds-type-title-1-regular     { font-family: var(--ds-font-family); font-weight: 400; font-size: 28px; line-height: 34px; letter-spacing: 0; }
.ds-type-title-1-emphasized  { font-family: var(--ds-font-family); font-weight: 600; font-size: 28px; line-height: 34px; letter-spacing: 0; }
.ds-type-title-2-regular     { font-family: var(--ds-font-family); font-weight: 400; font-size: 22px; line-height: 28px; letter-spacing: -0.22px; }
.ds-type-title-2-emphasized  { font-family: var(--ds-font-family); font-weight: 600; font-size: 22px; line-height: 28px; letter-spacing: -0.22px; }
.ds-type-title-3-regular     { font-family: var(--ds-font-family); font-weight: 400; font-size: 20px; line-height: 24px; letter-spacing: -0.4px; }
.ds-type-title-3-emphasized  { font-family: var(--ds-font-family); font-weight: 600; font-size: 20px; line-height: 24px; letter-spacing: -0.4px; }
.ds-type-body-regular        { font-family: var(--ds-font-family); font-weight: 400; font-size: 17px; line-height: 22px; letter-spacing: -0.34px; }
.ds-type-body-medium         { font-family: var(--ds-font-family); font-weight: 500; font-size: 17px; line-height: 22px; letter-spacing: -0.34px; }
.ds-type-body-emphasized     { font-family: var(--ds-font-family); font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -0.34px; }
.ds-type-body-2-regular      { font-family: var(--ds-font-family); font-weight: 400; font-size: 15px; line-height: 20px; letter-spacing: -0.3px; }
.ds-type-body-2-medium       { font-family: var(--ds-font-family); font-weight: 500; font-size: 15px; line-height: 20px; letter-spacing: -0.225px; }
.ds-type-body-2-emphasized   { font-family: var(--ds-font-family); font-weight: 600; font-size: 15px; line-height: 20px; letter-spacing: -0.15px; }
.ds-type-footnote-regular    { font-family: var(--ds-font-family); font-weight: 400; font-size: 13px; line-height: 16px; letter-spacing: -0.13px; }
.ds-type-footnote-medium     { font-family: var(--ds-font-family); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: -0.13px; }
.ds-type-caption-1-regular   { font-family: var(--ds-font-family); font-weight: 400; font-size: 12px; line-height: 16px; letter-spacing: 0; }
.ds-type-caption-1-medium    { font-family: var(--ds-font-family); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0; }
.ds-type-caption-2-medium    { font-family: var(--ds-font-family); font-weight: 500; font-size: 11px; line-height: 14px; letter-spacing: 0.11px; }
.ds-type-headline            { font-family: var(--ds-font-family); font-weight: 600; font-size: 17px; line-height: 22px; letter-spacing: -0.43px; }
.ds-type-mono                { font-family: var(--ds-font-mono); font-weight: 400; font-size: 15px; line-height: 20px; letter-spacing: -0.15px; }