/* ===================================================== */
/* ===================== TOKENS ======================== */
/* ===== ЕДИНСТВЕННЫЙ ИСТОЧНИК ПРАВДЫ ================== */
/* ===================================================== */

:root{

  /* ===================================================== */
  /* ===================== THEME ========================= */
  /* ===================================================== */

  /* Фон */
  --bg-primary:    #282940;
  --bg-secondary:  #282940; /* #2e2f4a; */
  --bg-card:       #23243a;

  /* Текст */
  --text-primary:   #ffffff;
  --text-secondary: #b0b0c3;

  --text-on-light: #1a1b2e; /* темный текст для светлых градиентов */

  /* Акценты */
  --accent:       #fff;
  --accent-blue:  #5BA8FF;

  /* Тени */
  --shadow: rgba(0,0,0,.35);

  /* Кнопки */
  --button-bg:       #2b2c45;
  --button-active:   #4ade80;
  --button-hover:    #22c55e;
  --button-disabled: #3a3b55;

  --z-modal-overlay: 20000;
  --z-modal: 20001;

  /* ===================================================== */
  /* ===================== LAYOUT ======================== */
  /* ===================================================== */

  /* Safe-area + нижний навбар */
  --layout-bottom-padding: calc(60px + 8px + env(safe-area-inset-bottom, 0px));


  /* ===================================================== */
  /* ===================== NAV =========================== */
  /* ===================================================== */

  /* Сдвиг всей панели */
  --nav-x: 0px;
  --fab: 48px;

  /* Фильтр активных иконок */
  --icon-active-filter:
    brightness(0)
    saturate(100%)
    invert(71%)
    sepia(23%)
    saturate(980%)
    hue-rotate(182deg)
    brightness(98%)
    contrast(95%);


    /* surfaces (единые "поверхности" для карточек/панелей) */
    --surface-1: rgba(255,255,255,.06);      /* карточки */
    --surface-2: rgba(255,255,255,.04);      /* вложенные блоки */
    --border-subtle: rgba(255,255,255,.10);  /* тонкие границы */
    --shadow-soft: 0 6px 18px rgba(0,0,0,.20);

  /* ===================================================== */
  /* =============== RARITY : TEXT COLORS ================ */
  /* ===================================================== */

  --common-color:    #b0b0b0;
  --rare-color:      #4db8ff;
  --epic-color:      #a569bd;
  --legendary-color: #ffb347;
  --mythical-color:  #ff66cc;
  --divine-color:    #66e066;
  --artifact-color:  #ff6f61;

/* ===== Profile (player header) tokens ===== */
  --profile-card-bg: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --profile-card-border: rgba(255,255,255,.10);
  --profile-card-shadow: 0 10px 26px rgba(0,0,0,.30);
  --profile-card-inset: inset 0 1px 0 rgba(255,255,255,.06);

  --profile-avatar-bg: rgba(255,255,255,.06);
  --profile-avatar-border: rgba(255,255,255,.12);
  --profile-avatar-shadow: 0 8px 18px rgba(0,0,0,.35);

  --profile-name-color: var(--text-primary);
  --profile-id-color: var(--text-secondary);

  /* небольшой акцент, но не “фиолетовый” */
  --profile-accent: rgba(244,228,163,.22); /* близко к твоему accent */
  --profile-divider: rgba(255,255,255,.08);


  /* ===================================================== */
  /* =============== RARITY : CARD BACKGROUNDS =========== */
  /* ===================================================== */

  --common-bg:    linear-gradient(to bottom, #d0d0d0, #a0a0a0);
  --rare-bg:      linear-gradient(to bottom, #00c4ff, #0088cc);
  --epic-bg:      linear-gradient(to bottom, #b24cff, #7a1fa2);
  --legendary-bg: linear-gradient(to bottom, #ffcc00, #cc9900);
  --mythical-bg:  linear-gradient(to bottom, #ff33ff, #cc00cc);
  --divine-bg:    linear-gradient(to bottom, #00ff00, #00cc00);
  --artifact-bg:  linear-gradient(to bottom, #ff6633, #cc3300);


  /* ===================================================== */
  /* =============== RARITY : MODAL BACKGROUNDS =========== */
  /* ===================================================== */

  /* ===== Catch UI tokens ===== */
  --catch-panel-bg: rgba(255,255,255,.06);
  --catch-panel-border: rgba(255,255,255,.10);
  --catch-panel-shadow: 0 10px 26px rgba(0,0,0,.28);

  /* инфо-плашка на голубе/яйце */
  --catch-info-radius: 14px;
  --catch-info-maxw: 170px;

  /* ключ: “тонировка” поверх rarity-bg, чтобы текст был читаемый */
  --catch-info-overlay: rgba(20, 22, 36, .42);

  /* текст (НЕ черный, но и не белый “в стекло”) */
  --catch-info-text: rgba(255,255,255,.92);
  --catch-info-subtext: rgba(255,255,255,.78);

  /* тонкая рамка внутри */
  --catch-info-inner-border: rgba(255,255,255,.14);


  --common-modal-bg:    linear-gradient(135deg,
                          rgba(176,176,176,.95),
                          rgba(128,128,128,.85),
                          rgba(176,176,176,.95),
                          rgba(100,100,100,.85));

  --rare-modal-bg:      linear-gradient(135deg,
                          rgba(0,183,255,.95),
                          rgba(0,128,255,.85),
                          rgba(0,183,255,.95),
                          rgba(0,100,255,.85));

  --epic-modal-bg:      linear-gradient(135deg,
                          rgba(165,105,189,.95),
                          rgba(128,0,128,.85),
                          rgba(165,105,189,.95),
                          rgba(100,0,100,.85));

  --legendary-modal-bg: linear-gradient(135deg,
                          rgba(255,179,71,.95),
                          rgba(255,140,0,.85),
                          rgba(255,179,71,.95),
                          rgba(255,100,0,.85));

  --mythical-modal-bg:  linear-gradient(135deg,
                          rgba(255,102,204,.95),
                          rgba(255,0,255,.85),
                          rgba(255,102,204,.95),
                          rgba(255,0,204,.85));

  --divine-modal-bg:    linear-gradient(135deg,
                          rgba(102,224,102,.95),
                          rgba(0,255,0,.85),
                          rgba(102,224,102,.95),
                          rgba(0,204,0,.85));

  --artifact-modal-bg:  linear-gradient(135deg,
                          rgba(255,111,97,.95),
                          rgba(255,69,0,.85),
                          rgba(255,111,97,.95),
                          rgba(255,0,0,.85));


  /* ===================================================== */
  /* =============== RARITY : BORDERS ==================== */
  /* ===================================================== */

  --common-border:    rgba(176,176,176,.9);
  --rare-border:      rgba(0,183,255,.9);
  --epic-border:      rgba(178,76,255,.9);
  --legendary-border: rgba(255,179,71,.9);
  --mythical-border:  rgba(255,102,204,.9);
  --divine-border:    rgba(102,224,102,.9);
  --artifact-border:  rgba(255,111,97,.9);


/* ===================================================== */
/* =============== RARITY : INFO BLOCKS ================ */
/* ========== ALIAS к основным BG ====================== */
/* ===================================================== */

--common-info-bg:    var(--common-bg);
--rare-info-bg:      var(--rare-bg);
--epic-info-bg:      var(--epic-bg);
--legendary-info-bg: var(--legendary-bg);
--mythical-info-bg:  var(--mythical-bg);
--divine-info-bg:    var(--divine-bg);
--artifact-info-bg:  var(--artifact-bg);


  /* ===== MODAL TOKENS ===== */
--modal-overlay-bg: rgba(0, 0, 0, 0.7);

--modal-close-bg: linear-gradient(to bottom, #991b1b, #7f1d1d);
--modal-close-hover: linear-gradient(to bottom, #b91c1c, #991b1b);

/* дефолтная модалка (если нет rarity-класса) */
--modal-default-bg: linear-gradient(
  135deg,
  rgba(60, 60, 80, 0.95),
  rgba(80, 80, 100, 0.85),
  rgba(60, 60, 80, 0.95),
  rgba(40, 40, 60, 0.85)
);
--modal-default-border: rgba(100, 100, 120, 0.9);
--modal-default-glow-1: rgba(100, 100, 120, 0.7);
--modal-default-glow-2: rgba(100, 100, 120, 0.5);



  --pf-update-z: 999999;

  /* overlay */
  --pf-update-overlay-bg: rgba(0,0,0,.55);
  --pf-update-overlay-blur: 12px;

  /* card */
  --pf-update-card-bg: var(--bg-card);
  --pf-update-card-border: var(--border-subtle);
  --pf-update-card-radius: 22px;
  --pf-update-card-shadow: 0 18px 48px rgba(0,0,0,.48);

  /* spacing */
  --pf-update-pad: 18px;
  --pf-update-gap: 12px;

  /* icon chip */
  --pf-update-icon-bg: var(--surface-1);
  --pf-update-icon-border: var(--border-subtle);
  --pf-update-icon-radius: 14px;

  /* typography */
  --pf-update-title-color: var(--text-primary);
  --pf-update-subtitle-color: var(--text-secondary);
  --pf-update-title-size: 16px;
  --pf-update-subtitle-size: 13px;

  /* pill */
  --pf-update-pill-bg: var(--surface-1);
  --pf-update-pill-border: var(--border-subtle);
  --pf-update-pill-radius: 999px;
  --pf-update-pill-label: rgba(255,255,255,.70);
  --pf-update-pill-value: rgba(255,255,255,.94);

  /* note */
  --pf-update-note-color: rgba(255,255,255,.72);

  /* button (не кислотная, но “твоя” зелень) */
  --pf-update-btn-bg: var(--button-active);
  --pf-update-btn-bg-hover: var(--button-hover);
  --pf-update-btn-text: var(--text-on-light);

  /* button shape */
  --pf-update-btn-radius: 16px;
  --pf-update-btn-height: 48px;

  /* safe area */
  --pf-update-safe-bottom: env(safe-area-inset-bottom, 0px);




}