/**
 * Design Tokens — drmusin.ru
 * System: "Чернила и золото" (Ink & Gold)
 * No green shades permitted. Rule 60 / 30 / 10.
 */

:root {
  /* ==========================================================================
     1. Основа палитры (Palette Foundation)
     ========================================================================== */
  --paper:       #F7F4EE; /* 60%: Тёплая бумага, основной светлый фон */
  --paper-2:     #EFE9DD; /* 60%: Песок, вторичный светлый для ритмичного чередования */
  --ink-900:     #0E1A2B; /* 30%: Глубокий чернильный, тёмные секции и H-заголовки */
  --ink-700:     #1B2D47; /* 30%: Второй тёмный, карточки и полоса доказательств */
  --mist-200:    #DCE4EC; /* Дымчатый серо-голубой, hover строк, фон тегов и фото */
  --steel-500:   #3F5E82; /* Сталь, курсивные акценты в заголовках на светлом фоне */

  /* ==========================================================================
     2. Акценты и кнопки (Accents & Button System)
     ========================================================================== */
  --btn-primary-bg:    #0E1A2B; /* на светлых секциях: сплошной чернильный */
  --btn-primary-text:  #F7F4EE;
  --btn-primary-hover: #1B2D47;
  --btn-on-dark-bg:    #F7F4EE; /* на тёмных секциях: светлая кнопка */
  --btn-on-dark-text:  #0E1A2B;
  --btn-on-dark-hover: #FFFFFF;
  --accent-bright:     #F2B84B; /* чистый янтарный, ТОЛЬКО мелкие акценты: стрелка в кнопке, подчёркивание, цифры */

  --gold-300:          #E6D3A3; /* Светлое золото: курсивы на тёмном, тонкие линии */
  --clay-500:          #B5654A; /* Терракота: строго 1–2 микро-точки на экран (бейджи, чипы) */

  /* ==========================================================================
     3. Текст и линии (Text & Boundaries)
     ========================================================================== */
  --text:        #151C28; /* Основной текст на светлом фоне (контраст > 14:1) */
  --muted:       #5C6678; /* Второстепенный текст и пояснения (контраст > 4.8:1) */
  --text-dark:   #F7F4EE; /* Основной текст на чернильных секциях (контраст > 15:1) */
  --muted-dark:  rgba(247, 244, 238, 0.72); /* Вторичный текст на тёмном */
  --line:        rgba(14, 26, 43, 0.14);    /* Деликатные разделители на светлом */
  --line-dark:   rgba(247, 244, 238, 0.18); /* Деликатные линии на тёмном */
  --white:       #FFFFFF;

  /* ==========================================================================
     4. Радиусы и геометрия (Radii & Grid)
     ========================================================================== */
  --radius-sm:   6px;
  --radius-md:   10px;  /* Кнопки и формы по спецификации: 10px */
  --radius-lg:   20px;  /* Фотографии и карточки по спецификации: 20px */
  --radius-full: 9999px;

  --shell-width: 1280px;
  --shell-pad:   clamp(16px, 4vw, 48px);

  /* ==========================================================================
     5. Типографика (Typography)
     ========================================================================== */
  --font-serif:  "Newsreader", "PT Serif", Georgia, "Times New Roman", serif;
  --font-sans:   "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* ==========================================================================
     6. Тени и анимации (Elevation & Transitions)
     ========================================================================== */
  --shadow-sm:   0 2px 8px rgba(14, 26, 43, 0.06);
  --shadow-md:   0 8px 24px rgba(14, 26, 43, 0.08);
  --shadow-btn:  0 4px 14px rgba(14, 26, 43, 0.12);
  --shadow-btn-hover: 0 8px 22px rgba(14, 26, 43, 0.20);
  --shadow-btn-dark:  0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-btn-dark-hover: 0 8px 24px rgba(0, 0, 0, 0.35);
  --transition:  all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-btn: transform 180ms ease, background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;

  /* Совместимость с Ghost и upstream токенами */
  --color-navy:              var(--ink-900);
  --color-navy-hover:        var(--ink-700);
  --color-navy-soft:         var(--ink-700);
  --color-ivory:             var(--paper);
  --color-paper:             var(--white);
  --color-section:           var(--paper-2);
  --color-section-hover:     var(--mist-200);
  --color-text:              var(--text);
  --color-text-secondary:    var(--muted);
  --color-medical-blue:      var(--steel-500);
  --color-medical-blue-light:var(--gold-300);
  --color-border:            var(--line);
  --musin-paper:             var(--paper);
  --musin-ink:               var(--text);
  --musin-muted:             var(--muted);
  --musin-line:              var(--line);
  --musin-gold:              var(--accent-bright);
  --musin-serif:             var(--font-serif);
  --musin-sans:              var(--font-sans);
}