/* =============================================================
   COLOUR SYSTEM  ·  source of truth
   -------------------------------------------------------------
   Base: #101A30 navy · #A49279 gold · #0A0A0A onyx
         #F7F5F0 paper · #EDEAE2 bone

   Как применять в Claude Code:
   1. Подключить этот файл (или вставить :root в globals.css).
   2. Заменять хардкод-цвета в компонентах на SEMANTIC-токены
      снизу (--bg, --text, --accent, --border, ...), НЕ на сырые
      ступени рампов напрямую.
   3. Золото: на тёмном/hairline → --accent (#A49279).
             золотой ТЕКСТ на светлом → --accent-ink (#71624E).
   4. Тёмное золото = бронза (--gold-700/800/900). В зелень НЕ уводить.
   ============================================================= */

:root {

  /* ---------- BASE (ground truth) ---------- */
  --navy:   #101A30;   /* тёмно-синий, «полночь» */
  --gold:   #A49279;   /* тёплое золото (акцент)  */
  --onyx:   #0A0A0A;   /* чистый чёрный, анкер    */
  --paper:  #F7F5F0;   /* тёплая плашка/поверхность*/
  --bone:   #EDEAE2;   /* тёплый фон страницы     */

  /* ---------- GOLD ramp ----------
     hue заперт на ~34–37° → тёмные ступени идут в БРОНЗУ, не в зелень.
     светлее база → шампань → крем (то, что нужно для акцентов). */
  --gold-50:  #F4EEE4;  /* крем        */
  --gold-100: #EAE0D0;
  --gold-200: #DBCBB2;
  --gold-300: #C9B79B;  /* шампань — для крупных заливок */
  --gold-400: #B7A188;
  --gold-500: #A49279;  /* ★ BASE */
  --gold-600: #8C7A62;
  --gold-700: #71624E;  /* золотой текст на светлом (5.3:1) */
  --gold-800: #574B3B;  /* тёмная бронза */
  --gold-900: #3E3529;  /* espresso-бронза — самое тёмное золото */

  /* ---------- NAVY ramp ----------
     hue заперт на ~221° → без ухода в фиолет/бирюзу.
     база тёмная, вверх шкалы — светлые слейты. */
  --navy-50:  #E9ECF2;  /* бледный холодный тинт (в тёплой системе — точечно) */
  --navy-100: #CDD3E0;
  --navy-200: #A2ACC2;  /* muted-текст на тёмном */
  --navy-300: #6E7C9C;  /* слейт: линии/бордеры на тёмном */
  --navy-400: #46577C;
  --navy-500: #2E3E60;
  --navy-600: #1E2C49;  /* приподнятые navy-панели (navy на navy) */
  --navy-700: #16223D;
  --navy-800: #101A30;  /* ★ BASE */
  --navy-900: #0A1120;  /* самое глубокое */

  /* ---------- NEUTRAL ramp (warm) ----------
     hue ~36–40°, очень низкая насыщенность → тёплые greige/угли.
     paper и bone живут здесь. */
  --neutral-0:   #FBFAF7;  /* самый тёплый белый */
  --neutral-50:  #F7F5F0;  /* = paper (поверхность) */
  --neutral-100: #EDEAE2;  /* = bone (фон) */
  --neutral-200: #E4DFD4;  /* утопленные секции */
  --neutral-300: #D8D0C1;  /* hairline / тонкий бордер */
  --neutral-400: #C4BBAA;  /* бордер */
  --neutral-500: #A69D8C;  /* disabled / faint */
  --neutral-600: #837A6C;  /* muted-текст */
  --neutral-700: #5C554A;  /* вторичный текст */
  --neutral-800: #3A352E;  /* сильный текст (тёплый уголь) */
  --neutral-900: #211D17;  /* тёплый near-black для body-текста */

  /* ---------- rare emphasis ---------- */
  --oxblood:    #6E1423;   /* редкий «особый» акцент, ≤1 на экран */

  /* =========================================================
     SEMANTIC  ·  этим красятся компоненты
     ========================================================= */

  /* surfaces */
  --bg:              var(--neutral-100);  /* фон страницы  #EDEAE2 */
  --bg-raised:       var(--neutral-50);   /* карточки/плашки #F7F5F0 */
  --bg-sunken:       var(--neutral-200);  /* врезки/wells */
  --bg-inverse:      var(--navy-800);     /* тёмные секции #101A30 */
  --bg-inverse-2:    var(--navy-600);     /* панели внутри тёмного */
  --bg-inverse-warm: #1A1712;             /* тёплый near-black surface: login, подложки журнала */
  --bg-black:        var(--onyx);         /* чисто-чёрные поверхности */

  /* text */
  --text:            var(--neutral-900);  /* body — тёплый near-black (мягче оникса) */
  --text-strong:     var(--onyx);         /* заголовки-анкер, где нужен максимум */
  --text-secondary:  var(--neutral-700);
  --text-muted:      var(--neutral-600);
  --text-inverse:    var(--neutral-50);   /* текст на navy/onyx */
  --text-inverse-muted: var(--navy-200);  /* приглушённый на тёмном */

  /* lines / borders */
  --hairline:        #E7E1D6;              /* мягкая линия — как было (L87), НЕ темнить */
  --hairline-strong: var(--neutral-300);   /* #D8D0C1 — обводки маркеров карт / плотные разделители */
  --border:          var(--neutral-400);
  --border-strong:   var(--neutral-500);
  --hairline-inverse: var(--navy-600);    /* линии на navy */
  --hairline-gold:   var(--gold-500);     /* золотая линия на тёмном */

  /* accent (gold) */
  --accent:          var(--gold-500);     /* акценты/hairline/НА ТЁМНОМ */
  --accent-hover:    var(--gold-600);
  --accent-strong:   var(--gold-700);
  --accent-ink:      var(--gold-700);     /* золотой ТЕКСТ на светлом (5.3:1) */
  --accent-muted:    var(--gold-300);     /* шампань — крупные заливки */
  --accent-wash:     var(--gold-50);      /* едва золотой фон-тинт */
  --on-accent:       var(--onyx);         /* текст поверх золотой заливки */

  /* states */
  --ring:            var(--gold-500);     /* focus ring */
  --on-oxblood:      var(--neutral-50);
}

/* =========================================================
   Опционально: тёмная секция как контекст.
   Оберни блок в .on-dark — семантика перевернётся под navy-фон.
   ========================================================= */
.on-dark {
  --bg:            var(--navy-800);
  --bg-raised:     var(--navy-600);
  --text:          var(--neutral-50);
  --text-secondary: var(--navy-200);
  --text-muted:    var(--navy-300);
  --hairline:      var(--navy-600);
  --border:        var(--navy-500);
  --accent-ink:    var(--gold-500);   /* на тёмном золото читается как есть */
}

/* Тёплая тёмная секция (login, подложки журнала): как .on-dark, но warm near-black фон. */
.on-dark-warm {
  --bg:             var(--bg-inverse-warm);
  --bg-raised:      #241F19;
  --text:           var(--neutral-50);
  --text-secondary: #B8AE9D;
  --text-muted:     #8A8175;
  --hairline:       #2E281F;
  --border:         #3A342A;
  --accent-ink:     var(--gold-500);
}