/* ==========================================================================
   theme.css — дизайн-токены. ДВЕ канон-темы вселенной KIVOTOS:
     • data-theme="arona" — СВЕТЛАЯ, циан-нимб (Арона, ИИ арены).
     • data-theme="plana" — ТЁМНАЯ,  крас-розовый нимб (Плана, второй ИИ).
   Переключаются кнопкой в шапке. --cyan* = «бренд-акцент» (значение зависит
   от темы; имя историческое). Правь ТОЛЬКО тут — это палитра.
   ========================================================================== */

:root {
  /* ── ГЕОМЕТРИЯ (общая для тем) ── */
  --skew:        -12deg;    /* наклон параллелограммов-акцентов */
  --r-card:      4px;       /* острые углы — фирменная черта BA */
  --r-pill:      2px;
  --stripe:      3px;       /* цветная полоса сверху карточки */

  /* ── ТИПОГРАФИКА ── */
  --font-head: "Oswald", "Days One", system-ui, sans-serif;
  --font-body: "Exo 2", system-ui, "Segoe UI", sans-serif;
  --font-num:  "JetBrains Mono", ui-monospace, "Consolas", monospace;

  /* ── РАЗМЕРЫ ── */
  --nav-h:     62px;
  --pad:       14px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ========================================================================== */
/*  АРОНА — светлая тема (дефолт). Циан + белый, «Schale».                     */
/* ========================================================================== */
:root,
:root[data-theme="arona"] {
  /* акцент/бренд */
  --cyan:        #4bc4f0;
  --cyan-deep:   #2b9fd4;
  --cyan-soft:   #d7f0fb;
  --halo:        #8fe3ff;
  --on-accent:   #06222e;
  --accent-grad: linear-gradient(135deg, #4bc4f0, #2b9fd4);
  --top-glow:    rgba(143, 227, 255, 0.24);   /* мягкое сияние-нимб вверху экрана */
  --header-bg:   rgba(234, 241, 247, 0.86);   /* полупрозрачный фон липкой шапки */

  /* бейджи на портрете (кружок школы/скина + бейдж уровня) */
  --chip-bg:     rgba(255, 255, 255, 0.94);   /* белый кружок школы/скина */
  --chip-fg:     var(--cyan-deep);
  --chip-border: rgba(10, 20, 30, 0.06);
  --lv-bg:       rgba(10, 17, 27, 0.80);      /* тёмный бейдж уровня */
  --lv-fg:       #eaf4ff;
  --lv-num:      #ffe08a;
  --lv-border:   rgba(255, 255, 255, 0.14);
  /* затемнение низа портрета — холодный сине-графитовый */
  --scrim:       linear-gradient(to top, rgba(9, 16, 26, 0.74), rgba(9, 16, 26, 0.12) 62%, transparent);

  --navy:        #1c2530;
  --navy-soft:   #47566a;

  /* фон */
  --bg:          #eaf1f7;
  --bg-grid:     #dbe6f0;
  --surface:     #ffffff;
  --surface-2:   #f3f7fb;
  --line:        #dde6ef;
  --line-strong: #c4d2e0;

  /* текст */
  --text:        var(--navy);
  --text-dim:    var(--navy-soft);
  --text-faint:  #8b99ab;

  /* семантика */
  --ok:          #3ec97a;
  --warn:        #e0a83c;
  --danger:      #e0533c;

  /* тени */
  --sh-1:  0 1px 3px rgba(28, 37, 48, 0.10);
  --sh-2:  0 4px 14px rgba(28, 37, 48, 0.14);
  --sh-accent: 0 4px 18px rgba(75, 196, 240, 0.35);
}

/* ========================================================================== */
/*  ПЛАНА — тёмная тема. Крас-розовый нимб на графитовом фоне.                 */
/* ========================================================================== */
:root[data-theme="plana"] {
  /* акцент/бренд — «полукрасный-полурозовый» */
  --cyan:        #f2568e;
  --cyan-deep:   #ff7ba9;
  --cyan-soft:   #3a1622;
  --halo:        #ff9ec6;
  --on-accent:   #2a0713;
  --accent-grad: linear-gradient(135deg, #f2568e, #c93a63);
  --top-glow:    rgba(255, 158, 198, 0.16);   /* мягкое сияние-нимб вверху экрана */
  --header-bg:   rgba(20, 16, 26, 0.84);       /* полупрозрачный фон липкой шапки */

  /* бейджи на портрете: инверсия под тёмный фон —
     белые кружки → тёмные, тёмный бейдж уровня → белый (по просьбе). */
  --chip-bg:     rgba(18, 13, 24, 0.92);      /* тёмный кружок школы/скина */
  --chip-fg:     var(--cyan-deep);
  --chip-border: rgba(255, 255, 255, 0.12);
  --lv-bg:       rgba(248, 233, 240, 0.90);   /* жемчужно-розовый бейдж уровня (мягче чистого белого) */
  --lv-fg:       #2a0e18;
  --lv-num:      #c33a6b;
  --lv-border:   rgba(0, 0, 0, 0.14);
  /* затемнение низа портрета — тёмно-сливово-розовое вместо чёрного (в цвет темы) */
  --scrim:       linear-gradient(to top, rgba(28, 10, 20, 0.72), rgba(28, 10, 20, 0.10) 62%, transparent);

  --navy:        #f2e9ef;
  --navy-soft:   #c6a9b7;

  /* фон — графит с тёплым подтоном */
  --bg:          #14101a;
  --bg-grid:     #1e1826;
  --surface:     #1d1723;
  --surface-2:   #251d2e;
  --line:        #342a3f;
  --line-strong: #4a3a56;

  /* текст */
  --text:        var(--navy);
  --text-dim:    var(--navy-soft);
  --text-faint:  #8a7688;

  /* семантика (чуть ярче под тёмный фон) */
  --ok:          #4bd88a;
  --warn:        #f0b74e;
  --danger:      #ff6a52;

  /* тени */
  --sh-1:  0 1px 3px rgba(0, 0, 0, 0.45);
  --sh-2:  0 6px 20px rgba(0, 0, 0, 0.55);
  --sh-accent: 0 4px 20px rgba(242, 86, 142, 0.40);
}