/* ============================================================
   TESSERANOMICON — DESIGN TOKENS
   Шаг 1.1 — каркас
   Шаг 1.2 — резолвинг инверсии
   Шаг 1.3 — базовое наследование шрифтов
   Шаг 1.6 — 6 палитр, 5 шрифтовых пар
   Шаг 2.1 — токены слоёв (--header-h, --bottom-h, --z-overlay)

   Подключается ПЕРЕД style.css.
   ============================================================ */


/* ============================================================
   1. ЦВЕТОВЫЕ ПАЛИТРЫ (6 штук)
   ============================================================ */

/* Blossom — тёплая (дефолт) */
[data-palette="blossom"] {
  --c-l2:      #FAEFE9;  --c-l2-rgb:     250, 239, 233;
  --c-l1:      #E2D5C2;  --c-l1-rgb:     226, 213, 194;
  --c-n:       #F4A384;  --c-n-rgb:      244, 163, 132;
  --c-d1:      #7A5063;  --c-d1-rgb:     122, 80,  99;
  --c-d2:      #4A2C3F;  --c-d2-rgb:     74,  44,  63;
  --c-accent:  #486D83;  --c-accent-rgb: 72,  109, 131;

  /* Психотипизатор — отдельный акцент */
  --typing-accent:        #7E4A6E;
  --typing-accent-rgb:    126, 74,  110;
  --typing-accent-soft:   rgba(var(--typing-accent-rgb), 0.12);
  --typing-accent-strong: color-mix(in oklab, var(--typing-accent) 82%, black);
}

/* Navy Mirage — холодная */
[data-palette="navy"] {
  --c-l2:      #D4D8DD;  --c-l2-rgb:     212, 216, 221;
  --c-l1:      #C0C8CA;  --c-l1-rgb:     192, 200, 202;
  --c-n:       #AAB7B7;  --c-n-rgb:      170, 183, 183;
  --c-d1:      #2E4156;  --c-d1-rgb:     46,  65,  86;
  --c-d2:      #1A2D42;  --c-d2-rgb:     26,  45,  66;
  --c-accent:  #35577D;  --c-accent-rgb: 53,  87,  125;

  /* Психотипизатор — отдельный акцент */
  --typing-accent:        #4A6B99;
  --typing-accent-rgb:    74,  107, 153;
  --typing-accent-soft:   rgba(var(--typing-accent-rgb), 0.12);
  --typing-accent-strong: color-mix(in oklab, var(--typing-accent) 82%, black);
}

/* Uxintace — фиолетово-розовая */
[data-palette="uxintace"] {
  --c-l2:      #FFEDE5;  --c-l2-rgb:     255, 237, 229;
  --c-l1:      #E3B6B1;  --c-l1-rgb:     227, 182, 177;
  --c-n:       #845162;  --c-n-rgb:      132, 81,  98;
  --c-d1:      #29104A;  --c-d1-rgb:     41,  16,  74;
  --c-d2:      #150016;  --c-d2-rgb:     21,  0,   22;
  --c-accent:  #522C5D;  --c-accent-rgb: 82,  44,  93;

  /* Психотипизатор — отдельный акцент */
  --typing-accent:        #B54D7E;
  --typing-accent-rgb:    181, 77,  126;
  --typing-accent-soft:   rgba(var(--typing-accent-rgb), 0.12);
  --typing-accent-strong: color-mix(in oklab, var(--typing-accent) 82%, black);
}

/* Sage — зелёно-оливковая */
[data-palette="sage"] {
  --c-l2:      #D5DDDF;  --c-l2-rgb:     213, 221, 223;
  --c-l1:      #B2C582;  --c-l1-rgb:     178, 197, 130;
  --c-n:       #688E4E;  --c-n-rgb:      104, 142, 78;
  --c-d1:      #3C5148;  --c-d1-rgb:     60,  81,  72;
  --c-d2:      #1B2727;  --c-d2-rgb:     27,  39,  39;
  --c-accent:  #688E4E;  --c-accent-rgb: 104, 142, 78;

  /* Психотипизатор — отдельный акцент */
  --typing-accent:        #4A7F8E;
  --typing-accent-rgb:    74,  127, 142;
  --typing-accent-soft:   rgba(var(--typing-accent-rgb), 0.12);
  --typing-accent-strong: color-mix(in oklab, var(--typing-accent) 82%, black);
}

/* Crimson — красно-розовая */
[data-palette="crimson"] {
  --c-l2:      #FFB894;  --c-l2-rgb:     255, 184, 148;
  --c-l1:      #FB9590;  --c-l1-rgb:     251, 149, 144;
  --c-n:       #DC586D;  --c-n-rgb:      220, 88,  109;
  --c-d1:      #852E4E;  --c-d1-rgb:     133, 46,  78;
  --c-d2:      #4C1D3D;  --c-d2-rgb:     76,  29,  61;
  --c-accent:  #A33757;  --c-accent-rgb: 163, 55,  87;

  /* Психотипизатор — отдельный акцент */
  --typing-accent:        #7B3A9E;
  --typing-accent-rgb:    123, 58,  158;
  --typing-accent-soft:   rgba(var(--typing-accent-rgb), 0.12);
  --typing-accent-strong: color-mix(in oklab, var(--typing-accent) 82%, black);
}

/* Twilight — фиолетово-персиковая */
[data-palette="twilight"] {
  --c-l2:      #F7E6C4;  --c-l2-rgb:     247, 230, 196;
  --c-l1:      #E89F6E;  --c-l1-rgb:     232, 159, 110;
  --c-n:       #B85C4A;  --c-n-rgb:      184, 92,  74;
  --c-d1:      #40263A;  --c-d1-rgb:     64,  38,  58;
  --c-d2:      #1C1E3A;  --c-d2-rgb:     28,  30,  58;
  --c-accent:  #B85C4A;  --c-accent-rgb: 184, 92,  74;

  /* Психотипизатор — отдельный акцент */
  --typing-accent:        #8B5FA8;
  --typing-accent-rgb:    139, 95,  168;
  --typing-accent-soft:   rgba(var(--typing-accent-rgb), 0.12);
  --typing-accent-strong: color-mix(in oklab, var(--typing-accent) 82%, black);
}


/* ============================================================
   2. СЕМАНТИЧЕСКИЕ ТОКЕНЫ — СВЕТЛАЯ ТЕМА
   ============================================================ */

[data-theme="light"] {
  --bg:        var(--c-l2);
  --bg-elev:   color-mix(in oklab, var(--c-l2) 75%, white);
  --fg:        var(--c-d2);
  --fg-muted:  color-mix(in oklab, var(--c-d2) 65%, var(--c-l2));

  --surface:    color-mix(in oklab, var(--c-l2) 78%, white);
  --surface-2:  color-mix(in oklab, var(--c-l2) 55%, var(--c-l1));
  --surface-3:  var(--c-l1);

  --text:           var(--c-d2);
  --text-secondary: color-mix(in oklab, var(--c-d2) 65%, var(--c-l2));
  --text-muted:     color-mix(in oklab, var(--c-d2) 42%, var(--c-l2));

  --border:      rgba(var(--c-d1-rgb), 0.18);
  --border-rgb:  var(--c-d1-rgb);
  --shadow-rgb:  var(--c-d2-rgb);

  --accent:       var(--c-accent);
  --accent-hover: color-mix(in oklab, var(--c-accent) 82%, black);
  --accent-soft:  rgba(var(--c-accent-rgb), 0.12);
  --accent-rgb:   var(--c-accent-rgb);

  --header-bg:         color-mix(in oklab, var(--c-l2) 88%, transparent);
  --user-message:      var(--c-accent);
  --assistant-message: color-mix(in oklab, var(--c-l2) 78%, white);

  --danger:     #B91C1C;
  --danger-bg:  #FEF2F2;
  --success:    #166534;
  --success-bg: #F0FDF4;

  --shadow:  0 12px 35px rgba(var(--c-d2-rgb), 0.10);
  --overlay: rgba(var(--c-d2-rgb), 0.42);
}


/* ============================================================
   3. СЕМАНТИЧЕСКИЕ ТОКЕНЫ — ТЁМНАЯ ТЕМА
   ============================================================ */

[data-theme="dark"] {
  --bg:        var(--c-d2);
  --bg-elev:   color-mix(in oklab, var(--c-d2) 85%, white);
  --fg:        var(--c-l2);
  --fg-muted:  color-mix(in oklab, var(--c-l2) 62%, var(--c-d1));

  --surface:    color-mix(in oklab, var(--c-d2) 85%, white);
  --surface-2:  color-mix(in oklab, var(--c-d2) 70%, var(--c-d1));
  --surface-3:  var(--c-d1);

  --text:           var(--c-l2);
  --text-secondary: color-mix(in oklab, var(--c-l2) 62%, var(--c-d1));
  --text-muted:     color-mix(in oklab, var(--c-l2) 38%, var(--c-d1));

  --border:      rgba(var(--c-l1-rgb), 0.16);
  --border-rgb:  var(--c-l1-rgb);
  --shadow-rgb:  var(--c-d2-rgb);

  --accent:       var(--c-accent);
  --accent-hover: color-mix(in oklab, var(--c-accent) 80%, white);
  --accent-soft:  rgba(var(--c-accent-rgb), 0.22);
  --accent-rgb:   var(--c-accent-rgb);

  --header-bg:         color-mix(in oklab, var(--c-d2) 88%, transparent);
  --user-message:      var(--c-accent);
  --assistant-message: color-mix(in oklab, var(--c-d2) 85%, white);

  --danger:     #FCA5A5;
  --danger-bg:  #351719;
  --success:    #86EFAC;
  --success-bg: #14271B;

  --shadow:  0 14px 40px rgba(var(--c-d2-rgb), 0.55);
  --overlay: rgba(0, 0, 0, 0.68);
}


/* ============================================================
   4. ШРИФТОВЫЕ ПРЕСЕТЫ (5 пар)
   ============================================================ */

/* 1. Editorial — League Spartan + Manrope */
[data-font="editorial"] {
  --font-head: "League Spartan", "Inter Tight", system-ui, -apple-system, sans-serif;
  --font-btn:  "Manrope", "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Manrope", "Inter", system-ui, -apple-system, sans-serif;
}

/* 2. Technical — Exo 2 + Work Sans */
[data-font="technical"] {
  --font-head: "Exo 2", system-ui, -apple-system, sans-serif;
  --font-btn:  "Work Sans", system-ui, -apple-system, sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, sans-serif;
}

/* 3. Bold — Poppins ExtraBold + Inter */
[data-font="bold"] {
  --font-head: "Poppins", system-ui, -apple-system, sans-serif;
  --font-btn:  "Inter", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

/* 4. Montserrat — для обоих */
[data-font="montserrat"] {
  --font-head: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-btn:  "Montserrat", system-ui, -apple-system, sans-serif;
  --font-body: "Montserrat", system-ui, -apple-system, sans-serif;
}

/* 5. Mono — JetBrains Mono + IBM Plex Sans */
[data-font="mono"] {
  --font-head: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-btn:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
}


/* ============================================================
   5. БАЗОВЫЕ ТОКЕНЫ
   ============================================================ */

:root {
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  --shadow-soft:  0 2px 8px    rgba(var(--shadow-rgb), 0.10);
  --shadow-card:  0 6px 24px   rgba(var(--shadow-rgb), 0.14);
  --shadow-modal: 0 24px 64px  rgba(var(--shadow-rgb), 0.28);
  --shadow-glow:  0 0 24px     rgba(var(--accent-rgb), 0.28);

  --border-hairline: 1px solid rgba(var(--border-rgb), 0.18);
  --border-soft:     1px solid rgba(var(--border-rgb), 0.10);

  --grad-btn: linear-gradient(
    180deg,
    color-mix(in oklab, var(--c-d2) 92%, white) 0%,
    var(--c-d2) 100%
  );

  --grad-bg: radial-gradient(
    1200px 600px at 20% -10%,
    color-mix(in oklab, var(--c-l1) 60%, transparent) 0%,
    transparent 60%
  );

  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  --z-base:    0;
  --z-sticky:  10;
  --z-panel:   20;
  --z-header:  30;
  --z-overlay: 35;
  --z-modal:   40;
  --z-toast:   50;

  /* Слои архитектуры (Сессия 2) */
  --header-h: 64px;
  --bottom-h: 0px;

  --fs-xs:  0.8125rem;
  --fs-sm:  0.875rem;
  --fs-md:  1rem;
  --fs-lg:  1.125rem;
  --fs-xl:  1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;

  --lh-tight:  1.2;
  --lh-normal: 1.55;
  --lh-loose:  1.75;
}

/* Мобильная высота хедера (Сессия 2, Шаг 2.1) */
@media (max-width: 640px) {
  :root {
    --header-h: 56px;
  }
}


/* ============================================================
   6. БАЗОВОЕ НАСЛЕДОВАНИЕ ШРИФТОВ
   ============================================================ */

html,
body {
  font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
}

button,
.btn {
  font-family: var(--font-btn);
}

/* Poppins ExtraBold — заголовки жирнее */
[data-font="bold"] h1,
[data-font="bold"] h2,
[data-font="bold"] h3,
[data-font="bold"] h4,
[data-font="bold"] h5,
[data-font="bold"] h6 {
  font-weight: 800;
}