/* ============================================================
   ARKTX — Self-hosted fonts + visual polish
   中文: Zhi Mang Xing (行书)
   English / French: Patrick Hand
   Russian (Cyrillic): Patrick Hand has no Cyrillic glyphs,
   so Caveat (handwriting, full Cyrillic) is used as fallback.
   Code / addresses / hashes stay monospaced for readability.
   ============================================================ */

/* ---------- 1. Self-hosted fonts ---------- */
@font-face {
  font-family: "Patrick Hand";
  src: url("/fonts/PatrickHand.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Zhi Mang Xing";
  src: url("/fonts/ZhiMangXing.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("/fonts/Caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Global font stack ---------- */
:root, :host {
  --font-sans: "Patrick Hand", "Caveat", "Zhi Mang Xing",
    ui-sans-serif, system-ui, "Noto Sans SC", sans-serif;
  --default-font-family: "Patrick Hand", "Caveat", "Zhi Mang Xing",
    ui-sans-serif, system-ui, "Noto Sans SC", sans-serif;
  --arktx-gold: oklch(72% 0.14 75);
  --arktx-gold-deep: oklch(64% 0.13 72);
  --arktx-ink: oklch(28% 0.03 70);
}

html { scroll-behavior: smooth; }

body {
  font-family: "Patrick Hand", "Caveat", "Zhi Mang Xing",
    Inter, "Noto Sans SC", system-ui, sans-serif !important;
  line-height: 1.62;
  letter-spacing: 0.01em;
  /* Warm, premium background */
  background-color: var(--background);
  background-image:
    radial-gradient(1200px 620px at 82% -12%, oklch(90% 0.1 85 / 0.40), transparent 60%),
    radial-gradient(950px 560px at -12% 8%, oklch(88% 0.09 82 / 0.30), transparent 55%),
    radial-gradient(700px 700px at 50% 118%, oklch(92% 0.08 86 / 0.28), transparent 60%),
    linear-gradient(180deg, oklch(99.2% 0.003 90), var(--background));
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Headings / brand numbers (.font-orbitron) also adopt the handwritten stack */
.font-orbitron,
h1, h2, h3, h4, h5, h6 {
  font-family: "Patrick Hand", "Caveat", "Zhi Mang Xing",
    Inter, system-ui, sans-serif !important;
  letter-spacing: 0.015em;
}

input, textarea, select, button {
  font-family: inherit;
}
input::placeholder, textarea::placeholder {
  font-family: "Patrick Hand", "Caveat", "Zhi Mang Xing", sans-serif;
}

/* Keep code / addresses / hashes monospaced & legible */
code, pre, kbd, samp,
.font-mono, [class*="font-mono"] {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
}

/* ---------- 3. Cards / panels / popovers ---------- */
[class*="bg-card"],
[class*="bg-popover"] {
  border-radius: 16px !important;
  border: 1px solid oklch(86% 0.07 85 / 0.65);
  box-shadow:
    0 1px 2px rgba(80, 60, 20, 0.04),
    0 18px 40px -22px rgba(90, 70, 25, 0.30);
  backdrop-filter: blur(6px);
}

/* ---------- 4. Primary buttons ---------- */
button[class*="bg-primary"],
[role="button"][class*="bg-primary"] {
  border-radius: 12px !important;
  background-image: linear-gradient(135deg,
    oklch(79% 0.13 78), oklch(66% 0.13 71)) !important;
  border: 1px solid oklch(70% 0.13 73 / 0.5);
  box-shadow:
    0 12px 26px -12px oklch(70% 0.14 75 / 0.65),
    inset 0 1px 0 rgba(255, 255, 255, 0.30);
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
button[class*="bg-primary"]:hover,
[role="button"][class*="bg-primary"]:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    0 16px 32px -12px oklch(70% 0.14 75 / 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
button[class*="bg-primary"]:active,
[role="button"][class*="bg-primary"]:active {
  transform: translateY(0) scale(0.99);
}
button[class*="bg-primary"]:disabled,
[role="button"][class*="bg-primary"]:disabled {
  opacity: 0.55;
  box-shadow: none;
  background-image: none !important;
  transform: none;
}

/* Secondary / outline buttons get a soft hover */
button[class*="bg-secondary"],
button[class*="bg-muted"] {
  border-radius: 12px !important;
  transition: background 0.18s ease, transform 0.15s ease;
}
button[class*="bg-secondary"]:hover,
button[class*="bg-muted"]:hover {
  transform: translateY(-1px);
}

/* ---------- 5. Inputs ---------- */
input, textarea, select {
  border-radius: 12px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--arktx-gold) !important;
  box-shadow: 0 0 0 3px oklch(72% 0.14 75 / 0.18) !important;
  outline: none;
}

/* ---------- 6. Sticky header / nav glass ---------- */
header,
[class*="sticky"][class*="top-0"] {
  backdrop-filter: saturate(140%) blur(12px);
}

/* ---------- 7. Links & interactive polish ---------- */
a {
  transition: color 0.15s ease, opacity 0.15s ease;
}

/* ---------- 8. Scrollbars ---------- */
* {
  scrollbar-width: thin;
  scrollbar-color: oklch(80% 0.08 80) transparent;
}
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: oklch(82% 0.08 82 / 0.7);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: oklch(72% 0.11 78 / 0.85);
  background-clip: content-box;
}

/* ---------- 9. Selection ---------- */
::selection {
  background: oklch(80% 0.13 80 / 0.35);
  color: var(--arktx-ink);
}

/* ---------- 10. Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}