/* Дизайн-система «Черновик».
   Образ: лист, на котором пишут текст песни, — бумага, чернила, красный карандаш правки.
   Три уровня токенов: палитра → роли → компоненты. Значения цветов повторяют tokens.json,
   пары проверяет tools/apca.py (APCA: текст Lc ≥ 75, вторичный ≥ 60, крупное и границы ≥ 45). */
@layer reset, tokens, base, components, utilities;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Палитра */
    --paper: light-dark(#F6F1E7, #141210);
    --paper-raised: light-dark(#FDFAF4, #1D1A17);
    --paper-sunken: light-dark(#ECE5D6, #0D0C0B);
    --ink: light-dark(#1B1814, #EEE7DA);
    --ink-soft: light-dark(#544C41, #C6BDAD);
    --ink-faint: light-dark(#7D7364, #A69D8D);
    --rule: light-dark(#D6CCB9, #5C5449);
    --mark: light-dark(#A3261B, #F7A592);
    --mark-strong: light-dark(#8A1D14, #FBC0B2);
    --on-mark: light-dark(#FFF8F0, #1C0D09);
    --positive: light-dark(#2F6B3F, #9AD3A6);
    --border: light-dark(#7D7364, #A69D8D);

    /* Роли */
    --surface: var(--paper);
    --surface-raised: var(--paper-raised);
    --surface-sunken: var(--paper-sunken);
    --text: var(--ink);
    --text-secondary: var(--ink-soft);
    --text-tertiary: var(--ink-faint);        /* только крупно или как значок */
    --accent: var(--mark);
    --accent-hover: var(--mark-strong);
    --focus: var(--mark);
    --hairline: var(--rule);
    --shadow: light-dark(rgb(60 40 20 / .10), rgb(0 0 0 / .5));

    /* Шрифты: всё раздаётся с собственного сервера */
    --font-verse: "Literata", "Iowan Old Style", Georgia, serif;
    --font-ui: "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-hand: "Caveat", "Segoe Script", cursive;

    /* Шкала размеров: шаг 1.25 на телефоне растёт до 1.333 на широком экране */
    --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
    --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.125rem);
    --step-1: clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
    --step-2: clamp(1.45rem, 1.28rem + 0.85vw, 1.95rem);
    --step-3: clamp(1.80rem, 1.45rem + 1.75vw, 2.75rem);
    --step-4: clamp(2.30rem, 1.60rem + 3.50vw, 4.25rem);
    --step-5: clamp(2.70rem, 1.50rem + 6.00vw, 6.25rem);

    /* Отступы: шаг 4px */
    --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
    --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 7rem;
    --gutter: clamp(1.15rem, 5vw, 4rem);
    --measure: 34rem;
    --page: 76rem;

    /* Форма: лист почти без скруглений, элементы управления — капсулы */
    --radius-sheet: 3px;
    --radius-field: 10px;
    --radius-pill: 999px;
    --tap: 2.875rem;                          /* 46px: удобная цель для пальца */

    --ease: cubic-bezier(.2, .7, .2, 1);
    --quick: 140ms;
    --calm: 320ms;

    /* Компоненты */
    --button-bg: var(--accent);
    --button-text: var(--on-mark);
    --field-bg: var(--surface-raised);
    --field-border: var(--border);
    --sheet-bg: var(--surface-raised);
    --sheet-line: 2.1em;                      /* шаг линовки листа */
  }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, ol, ul, figure, blockquote, dl, dd { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  img, svg, audio { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; }
  [hidden] { display: none !important; }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
  body {
    min-height: 100dvh;
    background: var(--surface);
    color: var(--text);
    font: 400 var(--step-0)/1.6 var(--font-ui);
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { font-family: var(--font-verse); font-weight: 500; line-height: 1.1; text-wrap: balance; }
  h1 { font-size: var(--step-4); letter-spacing: -.015em; font-variation-settings: "opsz" 60; }
  h2 { font-size: var(--step-3); letter-spacing: -.01em; font-variation-settings: "opsz" 40; }
  h3 { font-size: var(--step-1); line-height: 1.25; }
  p { text-wrap: pretty; }
  a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: .22em; }
  a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
  ::selection { background: var(--mark); color: var(--on-mark); }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}

@layer components {
  /* Кнопки */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: var(--tap); padding: .55rem 1.35rem; border-radius: var(--radius-pill);
    border: 1.5px solid var(--field-border); background: transparent; color: var(--text);
    font-weight: 600; font-size: var(--step-0); line-height: 1.2; text-decoration: none;
    transition: background var(--quick) var(--ease), border-color var(--quick) var(--ease), transform var(--quick) var(--ease);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .btn:hover { border-color: var(--text); color: var(--text); }
  .btn:active { transform: scale(.98); }
  .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
  .btn--primary { background: var(--button-bg); border-color: var(--button-bg); color: var(--button-text); }
  .btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--button-text); }
  .btn--quiet { border-color: transparent; color: var(--text-secondary); padding-inline: .8rem; }
  .btn--quiet:hover { border-color: transparent; background: var(--surface-sunken); }
  .btn--wide { width: 100%; }
  .btn svg { width: 1.25em; height: 1.25em; flex: none; }

  .icon-btn {
    display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); flex: none;
    border-radius: 50%; border: 1.5px solid var(--field-border); background: transparent; color: var(--text);
    transition: background var(--quick) var(--ease), border-color var(--quick) var(--ease);
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  }
  .icon-btn:hover { border-color: var(--text); }
  .icon-btn--plain { border-color: transparent; color: var(--text-secondary); }
  .icon-btn--plain:hover { border-color: transparent; background: var(--surface-sunken); color: var(--text); }
  .icon-btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-mark); }
  .icon-btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  .icon-btn svg { width: 1.3rem; height: 1.3rem; }
  .icon { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .icon--solid { fill: currentColor; stroke: none; }

  /* Поля */
  .field {
    width: 100%; min-height: var(--tap); padding: .7rem .95rem; border-radius: var(--radius-field);
    border: 1.5px solid var(--field-border); background: var(--field-bg); color: var(--text);
    font-size: max(1rem, var(--step-0));       /* не меньше 16px: iOS не приближает страницу */
    line-height: 1.5;
  }
  .field::placeholder { color: var(--text-secondary); opacity: 1; }
  .field:focus-visible { outline-offset: 1px; border-color: var(--focus); }
  textarea.field { resize: vertical; min-height: 7.5rem; }

  /* Лист с линовкой: главный образ системы */
  .sheet {
    position: relative; background: var(--sheet-bg); border-radius: var(--radius-sheet);
    box-shadow: 0 1px 0 var(--hairline), 0 18px 40px -22px var(--shadow);
    padding: var(--space-5) var(--space-5) var(--space-5) calc(var(--space-5) + 1.9rem);
  }
  .sheet::before {                            /* красное поле тетрадного листа */
    content: ""; position: absolute; inset-block: 0; inset-inline-start: 2.35rem;
    width: 1px; background: color-mix(in oklab, var(--mark) 55%, transparent);
  }
  .verse { font-family: var(--font-verse); font-size: var(--step-1); line-height: var(--sheet-line); counter-reset: line; }
  .verse > * {
    counter-increment: line; position: relative;
    background: linear-gradient(to top, var(--hairline) 1px, transparent 1px);
  }
  .verse > *::before {
    content: counter(line, decimal-leading-zero); position: absolute; inset-inline-start: -2.55rem;
    width: 1.6rem; text-align: end; font: 500 .68rem/1 var(--font-ui); letter-spacing: .04em;
    color: var(--text-tertiary); top: calc(var(--sheet-line) / 2 - .2rem); font-variant-numeric: tabular-nums;
  }
  .verse > .gap { counter-increment: none; }
  .verse > .gap::before { content: none; }

  /* Правка красным карандашом */
  .struck { text-decoration: line-through; text-decoration-color: var(--mark); text-decoration-thickness: .07em; color: var(--text-secondary); }
  .hand { font-family: var(--font-hand); font-weight: 600; color: var(--mark); line-height: 1; }

  .eyebrow { font-size: var(--step--1); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
  .lead { font-size: var(--step-1); line-height: 1.5; color: var(--text-secondary); max-width: var(--measure); }
  .badge {
    display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .65rem; border-radius: var(--radius-pill);
    border: 1px solid var(--border); font-size: var(--step--1); font-weight: 500; color: var(--text-secondary); white-space: nowrap;
  }
  .badge--accent { border-color: var(--accent); color: var(--accent); }
  .badge--ok { border-color: var(--positive); color: var(--positive); }

  .notice {
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-field); background: var(--surface-raised);
    border-inline-start: 3px solid var(--accent); color: var(--text); font-size: var(--step-0);
  }

  dialog.modal {
    border: 0; padding: var(--space-5); border-radius: 14px; background: var(--surface-raised); color: var(--text);
    width: min(28rem, calc(100vw - 2rem)); box-shadow: 0 30px 80px -20px var(--shadow);
  }
  dialog.modal::backdrop { background: rgb(0 0 0 / .55); backdrop-filter: blur(3px); }
  dialog.modal h2 { font-size: var(--step-2); margin-bottom: var(--space-3); }
  dialog.modal .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
  dialog.modal .actions .btn { flex: 1 1 10rem; }
}

@layer utilities {
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .skip { position: absolute; inset-inline-start: -999px; z-index: 20; }
  .skip:focus { inset-inline-start: 1rem; top: 1rem; background: var(--surface-raised); padding: .6rem 1rem; border-radius: 8px; }
  .muted { color: var(--text-secondary); }
  .stack > * + * { margin-top: var(--space-4); }
}