/* Sekai — 和風幻想 · global style (порт styles.css из дизайн-хендоффа) */
@import "./tokens.css";

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Space+Mono:wght@400;700&family=Shippori+Mincho:wght@500;700&display=swap");

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-print-color-adjust:exact;print-color-adjust:exact}

body{
  /* dark-only: never pure black — sumrak holds the scene */
  background:var(--bg);
  color:var(--washi);
  font-family:'Space Grotesk',system-ui,-apple-system,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}

html.sk-smooth{scroll-behavior:smooth}

/* Japanese display / kanji */
.jp{font-family:'Shippori Mincho',serif}

/* mono used for hex, eyebrows, meta */
.mono{font-family:'Space Mono',monospace}

/* surfaces & hairlines */
.surface{background:var(--ink-2);border:1px solid var(--hair);border-radius:12px}
hr,.divider{border:none;border-top:1px solid var(--hair)}

a{color:var(--byakugun);text-decoration:none}
a:hover{text-decoration:underline}

::selection{background:var(--ruri);color:var(--washi)}

input::placeholder{color:#6B7099;opacity:.7}

/* ── keyframes (из дизайн-прототипов) ─────────────────────────────── */
@keyframes skFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
@keyframes skFloatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes skSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes skSpinBack{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
@keyframes skPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.8;transform:scale(1.06)}}
@keyframes skHint{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(8px);opacity:.3}}
@keyframes skShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes skFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

.sk-shake{animation:skShake .45s ease}

/* ── hover/focus (перенос style-hover / style-focus атрибутов) ────── */
/* nav service links */
a.hov-nav{text-decoration:none}
a.hov-nav:hover{text-decoration:none}
a.hov-nav-myaku:hover{color:var(--tsutsuji)!important}
a.hov-nav-kioku:hover{color:var(--fuji)!important}
a.hov-nav-yume:hover{color:var(--nadeshiko)!important}
a.hov-nav-fumi:hover{color:var(--byakugun)!important}
a.hov-nav-generic:hover{color:var(--byakugun)!important}

/* pill buttons: hero + per-service */
.hov-enter:hover{border-color:var(--tsutsuji)!important;box-shadow:0 0 30px rgba(232,78,138,.25)!important;text-decoration:none}
.hov-btn-myaku:hover{border-color:var(--tsutsuji)!important;box-shadow:0 0 26px rgba(232,78,138,.28)!important;text-decoration:none}
.hov-btn-kioku:hover{border-color:var(--fuji)!important;box-shadow:0 0 26px rgba(159,143,203,.30)!important;text-decoration:none}
.hov-btn-yume:hover{border-color:var(--nadeshiko)!important;box-shadow:0 0 26px rgba(234,143,174,.30)!important;text-decoration:none}
.hov-btn-fumi:hover{border-color:var(--byakugun)!important;box-shadow:0 0 26px rgba(143,214,220,.28)!important;text-decoration:none}
.hov-btn-generic:hover{border-color:var(--ruri)!important;box-shadow:0 0 26px rgba(53,92,214,.30)!important;text-decoration:none}

/* footer kanji links */
a.hov-foot:hover{color:var(--kasumi)!important;text-decoration:none}

/* login: inputs, eye, submit, forgot */
.foc-field:focus{border-color:var(--byakugun)!important;box-shadow:0 0 18px rgba(143,214,220,.15)}
.foc-field-plain:focus{border-color:var(--byakugun)!important}
.hov-eye:hover{color:var(--byakugun)!important}
.hov-submit:hover{border-color:var(--tsutsuji)!important;box-shadow:0 0 30px rgba(232,78,138,.28)!important}
a.hov-forgot:hover{color:var(--byakugun)!important;text-decoration:none}

/* users page */
a.hov-back:hover{color:var(--byakugun)!important;text-decoration:none}
.hov-newuser:hover{border-color:var(--tsutsuji)!important;box-shadow:0 0 26px rgba(232,78,138,.28)!important}
.sk-row:hover{background:rgba(27,33,72,.35)}
.hov-edit:hover{border-color:var(--byakugun)!important;color:var(--byakugun)!important}
.hov-del:hover{border-color:var(--tsutsuji)!important;color:var(--tsutsuji)!important}
.hov-cancel:hover{border-color:var(--hair-2)!important;color:var(--washi)!important}
.hov-save:hover{border-color:var(--tsutsuji)!important;box-shadow:0 0 26px rgba(232,78,138,.28)!important}
.hov-delete-confirm:hover{border-color:var(--tsutsuji)!important;box-shadow:0 0 26px rgba(232,78,138,.3)!important}

.hov-logout:hover{color:var(--tsutsuji)!important;text-decoration:none}
a.hov-users:hover{color:var(--byakugun)!important;text-decoration:none}

/* logout: форма-обертка, чтобы POST выглядел как nav-ссылка */
form.sk-inline{display:inline;margin:0;padding:0}
button.sk-linklike{background:none;border:none;cursor:pointer;padding:0}

/* ── мобильная шапка: коллапс нава до кандзи (по гайду хендоффа) ──── */
@media (max-width: 1020px){
  nav.sk-nav{padding:14px 18px!important}
  nav.sk-nav .sk-nav-links{gap:15px!important}
  nav.sk-nav .sk-nav-latin{display:none}
}
@media (max-width: 520px){
  nav.sk-nav{padding:12px 14px!important}
  nav.sk-nav .sk-nav-links{gap:9px!important}
  nav.sk-nav .sk-nav-links a, nav.sk-nav .sk-nav-links button{letter-spacing:0!important;gap:5px!important}
}