/* hakari — design tokens
   Палітра васі-паперу й туші. Усі кольори живуть тільки тут. */

:root {
  /* — поверхні — */
  --kinari:   #F4F1EA;  /* небілений папір */
  --kinari-2: #EBE7DD;  /* тонована поверхня */
  --kinari-v: rgba(244, 241, 234, .86);  /* той самий папір, крізь який видно */

  /* — туш — */
  --sumi:     #1A1A18;  /* основний текст */
  --usuzumi:  #6F6C65;  /* другорядний текст */
  --hairline: rgba(26, 26, 24, .13);
  --brush:    rgba(26, 26, 24, .24);  /* мазок-роздільник: тонший за лінію, але густіший у середині */

  /* — смисл — */
  --ai:       #2C4A63;  /* індиго     → суха маса */
  --shu:      #C1440E;  /* вермільйон → жирова маса, увага */
  --koke:     #6B705C;  /* мох        → рух у бік цілі */
  --kin:      #B08D57;  /* золото     → кінцугі, пропуски */

  /* — семантика — */
  --bg:        var(--kinari);
  --bg-veil:   var(--kinari-v);
  --surface:   var(--kinari-2);
  --fg:        var(--sumi);
  --fg-dim:    var(--usuzumi);
  --accent:    var(--shu);
  --ink-line:  var(--sumi);

  /* Волокна васі: ледь помітні горизонтальні нитки на тлі. Колір і
     прозорість тут, у токенах, — у темній темі нитки світлі. Малюється
     прямо в браузері, без картинок з мережі. */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .5' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");

  /* — простір — */
  --gutter: 28px;
  --stack:  22px;
  --stack-lg: 44px;
  --measure: 420px;

  /* — типографіка — */
  /* Тільки системні шрифти: нуль мережевих запитів, справжній офлайн.
     На iPhone це San Francisco для основного тексту й Georgia для
     засічкового — обидва вже в системі. */
  --f-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-serif: Georgia, 'Times New Roman', serif;

  --t-numeral: 300 44px/1 var(--f-sans);
  --t-numeral-sm: 300 30px/1 var(--f-sans);
  --t-body:   400 15px/1.65 var(--f-sans);
  --t-serif:  400 17px/1.2 var(--f-serif);

  /* підписи: завжди caps + розрідження */
  --t-label:  400 10px/1 var(--f-sans);
  --ls-label: .18em;

  --dur: .35s;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kinari:   #14140F;  /* темна туш */
    --kinari-2: #1D1D17;
    --kinari-v: rgba(20, 20, 15, .8);
    --sumi:     #E6E2D7;
    --usuzumi:  #8A867C;
    --hairline: rgba(230, 226, 215, .14);
    --brush:    rgba(230, 226, 215, .24);
    --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .5' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.88 0 0 0 0 0.84 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");

    --ai:   #6C93B4;
    --shu:  #D96A3A;
    --koke: #9AA187;
    --kin:  #C9A971;
  }
}

:root[data-theme="dark"] {
  --kinari:   #14140F;
  --kinari-2: #1D1D17;
  --kinari-v: rgba(20, 20, 15, .8);
  --sumi:     #E6E2D7;
  --usuzumi:  #8A867C;
  --hairline: rgba(230, 226, 215, .14);
  --brush:    rgba(230, 226, 215, .24);
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.04 .5' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.88 0 0 0 0 0.84 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --ai:   #6C93B4;
  --shu:  #D96A3A;
  --koke: #9AA187;
  --kin:  #C9A971;
}