/* my luna 9 — токены фирменного стиля.
   Светлая тема — в :root, тёмная — через prefers-color-scheme и data-theme.
   Компоненты берут цвета только отсюда. */

:root {
  /* Основа */
  --ground: #F7F4F8;        /* Молоко — фон страницы */
  --surface: #FFFFFF;       /* карточки и листы */
  --surface-2: #EFEAF2;     /* чипы, вторичные блоки */
  --line: #E4DDE8;          /* Лён — линии и границы */
  --ink: #2E2540;           /* Слива — основной текст */
  --ink-2: #6B6178;         /* Туман — вторичный текст */

  /* Бренд */
  --rose: #D9667F;          /* Шиповник — знак, графика, крупные цифры */
  --rose-ink: #B8456A;      /* Шиповник тёмный — ссылки и активные состояния */
  --rose-tint: #FBE8EE;
  --sage: #6FA895;          /* Шалфей — питание, «всё идёт своим чередом» */
  --sage-ink: #3F7866;
  --sage-tint: #E6F2EE;
  --honey: #D9A441;         /* Мёд — даты и напоминания */
  --honey-ink: #8A6517;
  --honey-tint: #FAF0DC;

  /* Этапы и модули */
  --apricot: #E08A5E;       /* Мама 0–3 */
  --apricot-ink: #A5532A;
  --apricot-tint: #FBEBE2;
  --blueberry: #5A6BAF;     /* Подростки, «Папа в курсе» */
  --blueberry-ink: #4B5B9E;
  --blueberry-tint: #E9ECF7;
  --lavender: #8C76B8;      /* Цикл */
  --lavender-ink: #6E58A0;
  --lavender-tint: #EFEAF7;

  /* Смысловые */
  --critical: #B8382A;      /* «Когда нельзя ждать» — не путать с шиповником */
  --critical-tint: #FBE6E2;

  /* Действия */
  --button: #2E2540;
  --button-text: #F7F4F8;

  /* Шрифты */
  --font-display: "Ysabeau Infant", "Ysabeau Office", ui-sans-serif, system-ui, sans-serif;
  --font-text: system-ui, -apple-system, "SF Pro Text", Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Форма */
  --radius-chip: 999px;
  --radius-control: 12px;
  --radius-card: 18px;
  --radius-sheet: 24px;
  --shadow-lift: 0 1px 2px rgba(46, 37, 64, 0.06), 0 8px 24px rgba(46, 37, 64, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #1B1522;
    --surface: #251D2E;
    --surface-2: #2F2639;
    --line: #3A3045;
    --ink: #F3EEF6;
    --ink-2: #B2A7BE;
    --rose: #EE8BA3;
    --rose-ink: #F29AB0;
    --rose-tint: #3A2433;
    --sage: #8CC5B1;
    --sage-ink: #9AD0BD;
    --sage-tint: #203530;
    --honey: #E8BD62;
    --honey-ink: #EDC876;
    --honey-tint: #3A2F18;
    --apricot: #F0A57E;
    --apricot-ink: #F4B592;
    --apricot-tint: #3D271C;
    --blueberry: #9AA8E6;
    --blueberry-ink: #AEBAEE;
    --blueberry-tint: #252B45;
    --lavender: #B6A2E0;
    --lavender-ink: #C4B3E8;
    --lavender-tint: #2E2745;
    --critical: #FF8A73;
    --critical-tint: #3D1F1B;
    --button: #EE8BA3;
    --button-text: #2E2540;
    --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  }
}

:root[data-theme="dark"] {
  --ground: #1B1522;
  --surface: #251D2E;
  --surface-2: #2F2639;
  --line: #3A3045;
  --ink: #F3EEF6;
  --ink-2: #B2A7BE;
  --rose: #EE8BA3;
  --rose-ink: #F29AB0;
  --rose-tint: #3A2433;
  --sage: #8CC5B1;
  --sage-ink: #9AD0BD;
  --sage-tint: #203530;
  --honey: #E8BD62;
  --honey-ink: #EDC876;
  --honey-tint: #3A2F18;
  --apricot: #F0A57E;
  --apricot-ink: #F4B592;
  --apricot-tint: #3D271C;
  --blueberry: #9AA8E6;
  --blueberry-ink: #AEBAEE;
  --blueberry-tint: #252B45;
  --lavender: #B6A2E0;
  --lavender-ink: #C4B3E8;
  --lavender-tint: #2E2745;
  --critical: #FF8A73;
  --critical-tint: #3D1F1B;
  --button: #EE8BA3;
  --button-text: #2E2540;
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
}