/* NoteFlow — дизайн-токены
   Светлая «Бумага и мята» — по умолчанию.
   Тёмная «Тёплый уголь» — data-theme="dark" или системная тёмная тема без data-theme. */

:root {
  /* Шрифт */
  --nf-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nf-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Типографика: размер / межстрочный / начертание */
  --nf-display: 800 40px/44px var(--nf-font);
  --nf-h1: 700 28px/34px var(--nf-font);
  --nf-h2: 700 22px/28px var(--nf-font);
  --nf-h3: 700 17px/22px var(--nf-font);
  --nf-body: 500 16px/24px var(--nf-font);
  --nf-text: 400 16px/26px var(--nf-font);
  --nf-button: 700 15px/20px var(--nf-font);
  --nf-caption: 500 14px/20px var(--nf-font);
  --nf-meta: 600 13px/18px var(--nf-font);
  --nf-tab: 600 12px/16px var(--nf-font);

  /* Отступы */
  --nf-space-1: 4px;
  --nf-space-2: 8px;
  --nf-space-3: 12px;
  --nf-space-4: 16px;
  --nf-space-5: 20px;
  --nf-space-6: 24px;
  --nf-space-8: 32px;
  --nf-space-12: 48px;
  --nf-gutter: 24px;          /* 20px при ширине < 375 */

  /* Скругления */
  --nf-r-tag: 8px;
  --nf-r-chip: 12px;
  --nf-r-field: 14px;
  --nf-r-row: 16px;
  --nf-r-tile: 18px;
  --nf-r-card: 20px;
  --nf-r-sheet: 24px;
  --nf-r-pill: 999px;

  /* Размеры */
  --nf-hit: 44px;
  --nf-btn-h: 52px;
  --nf-btn-h-sm: 44px;
  --nf-field-h: 52px;
  --nf-tile-h: 76px;
  --nf-nav-h: 68px;           /* + env(safe-area-inset-bottom) */

  /* Движение */
  --nf-ease: cubic-bezier(.2, .8, .2, 1);
  --nf-dur-check: 160ms;
  --nf-dur-toast: 180ms;
  --nf-dur-list: 200ms;
  --nf-dur-sheet: 240ms;

  /* Цвета предметов (только точки и полосы) */
  --nf-subject-blue: #3B6FD8;
  --nf-subject-amber: #C98A12;
  --nf-subject-lilac: #8A6BD8;
  --nf-subject-orange: #E07B3C;
  --nf-subject-teal: #2A9D8F;

  /* ===== Светлая тема ===== */
  color-scheme: light;
  --nf-bg: #F7F6F2;
  --nf-surface: #FFFFFF;
  --nf-surface-2: #EFEDE7;
  --nf-surface-done: #F2F1EC;
  --nf-nav: #FFFFFF;
  --nf-border: #E7E5DF;
  --nf-border-field: #D8D5CD;
  --nf-border-dashed: #C9C6BE;
  --nf-text: #1B1C1F;
  --nf-text-strong-2: #4A4C52;
  --nf-text-2: #6B6D73;
  --nf-checkbox: #8F8C84;

  --nf-accent: #277A5B;
  --nf-on-accent: #FFFFFF;
  --nf-accent-hover: #1E5F47;
  --nf-accent-soft: #E3F1EA;
  --nf-accent-deco: #3FA37E;
  --nf-accent-chart: #A8D9C3;

  --nf-danger: #C93C3C;
  --nf-danger-bg: #FDF3F1;
  --nf-danger-border: #F0C9C4;
  --nf-priority: #94650A;
  --nf-priority-dot: #C98A12;
  --nf-warn-bg: #FBF3E2;
  --nf-warn-border: #EDD6A6;
  --nf-warn-text: #7A5408;
  --nf-info: #2F62C8;
  --nf-info-bg: #E8EEFB;

  --nf-toast-bg: #1B1C1F;
  --nf-toast-text: #FFFFFF;
  --nf-toast-action: #8FE0BC;
  --nf-scrim: rgba(27, 28, 31, .40);

  --nf-shadow-card: 0 1px 2px rgba(27, 28, 31, .04), 0 6px 18px rgba(27, 28, 31, .04);
  --nf-shadow-float: 0 16px 40px rgba(27, 28, 31, .16);
  --nf-shadow-dialog: 0 24px 60px rgba(27, 28, 31, .25);
  --nf-shadow-sheet: 0 -12px 32px rgba(27, 28, 31, .12);
}

/* ===== Тёмная тема «Тёплый уголь» ===== */
:root[data-theme="dark"] {
  color-scheme: dark;
  --nf-bg: #1A1816;
  --nf-surface: #24211E;
  --nf-surface-2: #302C28;
  --nf-surface-done: #1F1D1A;
  --nf-nav: #201E1B;
  --nf-border: #34302B;
  --nf-border-field: #4A453F;
  --nf-border-dashed: #4A453F;
  --nf-text: #F2EEE8;
  --nf-text-strong-2: #D6D0C7;
  --nf-text-2: #ADA69C;
  --nf-checkbox: #6E675E;

  --nf-accent: #6FCF9F;
  --nf-on-accent: #10201A;
  --nf-accent-hover: #94DEB8;
  --nf-accent-soft: #2B3A31;
  --nf-accent-deco: #6FCF9F;
  --nf-accent-chart: #3E6B54;

  --nf-danger: #FF8F7F;
  --nf-danger-bg: #2E211E;
  --nf-danger-border: rgba(255, 143, 127, .38);
  --nf-priority: #F0BE62;
  --nf-priority-dot: #F0BE62;
  --nf-warn-bg: #2E2718;
  --nf-warn-border: #5A4A26;
  --nf-warn-text: #F0BE62;
  --nf-info: #9DB8FF;
  --nf-info-bg: rgba(157, 184, 255, .14);

  --nf-toast-bg: #F2EEE8;
  --nf-toast-text: #1A1816;
  --nf-toast-action: #1E6B4B;
  --nf-scrim: rgba(0, 0, 0, .55);

  --nf-shadow-card: none;
  --nf-shadow-float: 0 16px 40px rgba(0, 0, 0, .45);
  --nf-shadow-dialog: 0 24px 60px rgba(0, 0, 0, .55);
  --nf-shadow-sheet: 0 -12px 32px rgba(0, 0, 0, .4);
}

/* «Системная» тема: data-theme не задан */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --nf-bg: #1A1816;
    --nf-surface: #24211E;
    --nf-surface-2: #302C28;
    --nf-surface-done: #1F1D1A;
    --nf-nav: #201E1B;
    --nf-border: #34302B;
    --nf-border-field: #4A453F;
    --nf-border-dashed: #4A453F;
    --nf-text: #F2EEE8;
    --nf-text-strong-2: #D6D0C7;
    --nf-text-2: #ADA69C;
    --nf-checkbox: #6E675E;
    --nf-accent: #6FCF9F;
    --nf-on-accent: #10201A;
    --nf-accent-hover: #94DEB8;
    --nf-accent-soft: #2B3A31;
    --nf-accent-deco: #6FCF9F;
    --nf-accent-chart: #3E6B54;
    --nf-danger: #FF8F7F;
    --nf-danger-bg: #2E211E;
    --nf-danger-border: rgba(255, 143, 127, .38);
    --nf-priority: #F0BE62;
    --nf-priority-dot: #F0BE62;
    --nf-warn-bg: #2E2718;
    --nf-warn-border: #5A4A26;
    --nf-warn-text: #F0BE62;
    --nf-info: #9DB8FF;
    --nf-info-bg: rgba(157, 184, 255, .14);
    --nf-toast-bg: #F2EEE8;
    --nf-toast-text: #1A1816;
    --nf-toast-action: #1E6B4B;
    --nf-scrim: rgba(0, 0, 0, .55);
    --nf-shadow-card: none;
    --nf-shadow-float: 0 16px 40px rgba(0, 0, 0, .45);
    --nf-shadow-dialog: 0 24px 60px rgba(0, 0, 0, .55);
    --nf-shadow-sheet: 0 -12px 32px rgba(0, 0, 0, .4);
  }
}

/* База */
html { background: var(--nf-bg); color: var(--nf-text); font: var(--nf-body); }
:focus-visible { outline: 2px solid var(--nf-accent); outline-offset: 2px; }
.nf-num { font-variant-numeric: tabular-nums; }

@media (max-width: 374px) { :root { --nf-gutter: 20px; } }

/* Уменьшенное движение: системное или из настроек (data-reduce-motion на <html>) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
:root[data-reduce-motion] *, :root[data-reduce-motion] *::before, :root[data-reduce-motion] *::after {
  animation-duration: 1ms !important; transition-duration: 1ms !important;
}