/* ============================================================
   Nody Tarot — tokens.css
   Bảng màu, phông chữ, nhịp giãn cách. Sửa ở đây là đổi cả web.
   ============================================================ */

:root {
  /* --- Đêm Lam Ngọc (mặc định) --- */
  --void:        #05080f;
  --night:       #0a1224;
  --plum:        #0f1c38;
  --dusk:        #16295a;
  --panel:       rgba(14, 26, 54, .74);
  --panel-solid: #0f1c38;

  --moon:        #5fb4ec;   /* lam sáng — nhấn chính */
  --moon-deep:   #3480c4;
  --blossom:     #8b9bf6;   /* tím lam — nhấn phụ, thay cho hồng */
  --mist:        #6fe0d6;   /* ngọc lam — lớp thời gian */
  --sage:        #6fd0a8;

  --ink:         #eaf1ff;
  --ink-soft:    #b9c8e8;
  --ink-mute:    #7288ae;

  --line:        rgba(95, 180, 236, .24);
  --line-soft:   rgba(234, 241, 255, .09);
  --glow:        0 0 60px rgba(95, 180, 236, .26);
  --star:        #ffffff;

  --card-face:   #e7edf8;
  --card-edge:   #4a76ad;

  /* nhịp */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 34px;
  --gut: clamp(18px, 4vw, 40px);
  --maxw: 1160px;
  --prose: 68ch;

  --ease: cubic-bezier(.22, .78, .28, 1);
  --t-fast: .18s var(--ease);
  --t-mid: .38s var(--ease);
  --t-slow: .9s var(--ease);
}

/* --- Ban Mai (giao diện sáng) --- */
body.dawn {
  --void:        #f4f8fd;
  --night:       #eaf1fb;
  --plum:        #ffffff;
  --dusk:        #e0eafc;
  --panel:       rgba(255, 255, 255, .8);
  --panel-solid: #ffffff;

  --moon:        #1f74b8;
  --moon-deep:   #14568c;
  --blossom:     #5a67d6;
  --mist:        #199aa0;
  --sage:        #22916a;

  --ink:         #142238;
  --ink-soft:    #3c5170;
  --ink-mute:    #7186a4;

  --line:        rgba(31, 116, 184, .24);
  --line-soft:   rgba(20, 34, 56, .08);
  --glow:        0 0 50px rgba(31, 116, 184, .16);
  --star:        #1f74b8;

  --card-face:   #fbfdff;
  --card-edge:   #a8c1e2;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* dùng đơn vị "viewport động" để không giật khi thanh địa chỉ ẩn/hiện trên điện thoại */
  background: var(--void);
  color: var(--ink);
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--t-slow), color var(--t-mid);
}

img, svg { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; padding: 0; }
a { color: inherit; text-decoration: none; }

/* ============================================================
   Chữ
   ============================================================ */
h1, h2, h3, h4 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 500;
  line-height: 1.22;
  margin: 0;
  letter-spacing: -.005em;
}

h1 { font-size: clamp(2.1rem, 5.6vw, 3.6rem); }
h2 { font-size: clamp(1.55rem, 3.6vw, 2.35rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.35rem); }

p { margin: 0 0 1em; max-width: var(--prose); }

.serif  { font-family: 'Lora', Georgia, serif; }
.poem   { font-family: 'Lora', Georgia, serif; font-style: italic; color: var(--ink-soft); }
.soft   { color: var(--ink-soft); }
.mute   { color: var(--ink-mute); }
.tiny   { font-size: .82rem; }

/* nhãn nhỏ — viết thường, không in hoa toàn bộ */
.label-sm {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--moon);
  font-weight: 500;
}

/* ============================================================
   Tiện ích
   ============================================================ */
.wrap { width: min(100% - var(--gut) * 2, var(--maxw)); margin-inline: auto; }
.narrow { width: min(100% - var(--gut) * 2, 780px); margin-inline: auto; }
.center { text-align: center; }
.center p { margin-inline: auto; }
.stack > * + * { margin-top: 14px; }
.hidden { display: none !important; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--moon);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Liên kết "bỏ qua điều hướng" cho người dùng bàn phím/đọc màn hình —
   ẩn hoàn toàn cho tới khi được Tab tới, lúc đó hiện hẳn ra ở góc trên. */
.skip-link {
  position: fixed;
  top: -60px; left: 10px;
  z-index: 10000;
  background: var(--moon);
  color: #07101d;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: 10px;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 10px; }

/* ---------- Chế độ dễ tiếp cận ----------
   Bật bằng nút ♿ trên đầu trang (shell.js). Mục tiêu: chữ to và giãn
   dòng hơn, tương phản mạnh hơn, khung focus rõ hơn hẳn, bớt chuyển
   động trang trí — không đổi bố cục/màu thương hiệu, chỉ làm rõ hơn. */
html[data-a11y="on"] { font-size: 113%; }
html[data-a11y="on"] body { line-height: 1.85; }
html[data-a11y="on"] p, html[data-a11y="on"] li { max-width: 68ch; }
html[data-a11y="on"] a:not(.btn):not(.btn-ghost):not(.btn-moon):not(.icon-btn):not(.skip-link) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
html[data-a11y="on"] :focus-visible {
  outline: 3px solid var(--moon);
  outline-offset: 3px;
}
html[data-a11y="on"] .btn, html[data-a11y="on"] .btn-ghost, html[data-a11y="on"] .btn-moon,
html[data-a11y="on"] .icon-btn, html[data-a11y="on"] .input, html[data-a11y="on"] .textarea,
html[data-a11y="on"] select.input {
  min-height: 46px;
}
/* Tắt hẳn các lớp hiệu ứng trang trí thuần hình ảnh — không phải chữ,
   không mang thông tin, chỉ gây rối mắt/phân tâm cho người cần chế độ
   này. Hiệu ứng hành vi (hover nâng nhẹ nút...) vẫn giữ để biết đang
   tương tác đúng chỗ. */
html[data-a11y="on"] #scene,
html[data-a11y="on"] .nody-bg-canvas,
html[data-a11y="on"] .aurora,
html[data-a11y="on"] .petal,
html[data-a11y="on"] .shooting {
  display: none !important;
}
html[data-a11y="on"] *, html[data-a11y="on"] *::before, html[data-a11y="on"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.12s !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}