/* Phong cách gốc Canuc80k: lớp token đặt SAU portal.css (site-kit).
   Mọi wiki dùng chung nền, chữ, khoảng cách, thành phần; mỗi wiki chỉ đổi vài núm:
     --hue      sắc màu nhấn (0–360, OKLCH). AI = 40 (đất nung, màu gốc).
     --chroma   độ đậm màu nhấn (1 = như gốc; < 1 cho sắc dễ tràn gam như vàng, gỗ).
     --rk       hệ số bo góc (1 = như gốc; .5 vuông hơn, 1.5 tròn hơn). prep.mjs đổi mọi border-radius của portal.css thành calc(N * --rk).
     --motion   hệ số thời gian chuyển động (1 = như gốc, 0 = tắt). prep.mjs đổi mọi transition của portal.css theo hệ số này.
   Biến màu nhấn tính lại ở mọi phần tử có lớp .themed (đặt --hue riêng cho một khối, ví dụ thẻ wiki trên trang cổng).
   Màu nhấn tính bằng OKLCH với độ sáng cố định nên đổi --hue không làm hỏng độ tương phản chữ (đã đo: chữ nhấn ≥ 5,1 : 1 trên nền sáng, ≥ 6,7 : 1 trên nền tối). */
:root {
  --hue: 40;
  --chroma: 1;
  --rk: 1;
  --motion: 1;
}
:root, .themed {
  --accent: oklch(.600 calc(.135 * var(--chroma)) var(--hue));
  --accent-strong: oklch(.531 calc(.123 * var(--chroma)) var(--hue));
  --accent-ink: oklch(.496 calc(.122 * var(--chroma)) var(--hue));
  --accent-soft: oklch(.934 calc(.020 * var(--chroma)) calc(var(--hue) + 13));
  --t-k: var(--accent-ink);

  --radius: calc(10px * var(--rk));
  --r-xs: calc(4px * var(--rk));
  --r-sm: calc(8px * var(--rk));
  --r-md: calc(10px * var(--rk));
  --r-lg: calc(14px * var(--rk));
  --r-pill: 999px;

  --dur-1: calc(120ms * var(--motion));
  --dur-2: calc(220ms * var(--motion));
  --dur-3: calc(420ms * var(--motion));
  --ease: cubic-bezier(.2, .7, .2, 1);

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 34px;

  /* Tô màu code (Shiki, theme css-variables) theo bảng màu của trang. */
  --astro-code-foreground: var(--code-text);
  --astro-code-background: var(--code-bg);
  --astro-code-token-keyword: var(--t-k);
  --astro-code-token-string: var(--t-s);
  --astro-code-token-string-expression: var(--t-s);
  --astro-code-token-constant: var(--t-n);
  --astro-code-token-comment: var(--t-c);
  --astro-code-token-function: var(--code-text);
  --astro-code-token-parameter: var(--code-text);
  --astro-code-token-punctuation: var(--code-text);
  --astro-code-token-link: var(--accent-ink);
}
:root[data-theme="dark"], :root[data-theme="dark"] .themed {
  --accent: oklch(.672 calc(.131 * var(--chroma)) var(--hue));
  --accent-strong: oklch(.725 calc(.118 * var(--chroma)) var(--hue));
  --accent-ink: oklch(.761 calc(.105 * var(--chroma)) var(--hue));
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --t-k: var(--accent-ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) .themed {
    --accent: oklch(.672 calc(.131 * var(--chroma)) var(--hue));
    --accent-strong: oklch(.725 calc(.118 * var(--chroma)) var(--hue));
    --accent-ink: oklch(.761 calc(.105 * var(--chroma)) var(--hue));
    --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
  --t-k: var(--accent-ink);
  }
}
@media (prefers-reduced-motion: reduce) { :root { --motion: 0 !important; } }

/* Khối code Shiki trong khung .t-code của site-kit. */
.t-code pre.astro-code { margin: 0; padding: 14px 16px; background: var(--code-bg) !important; font: 13.5px/1.6 var(--mono); tab-size: 4; }
.t-code pre.astro-code code { font: inherit; background: none; padding: 0; }

/* ---------- thành phần dùng chung của nền tảng (cổng + mọi wiki) ---------- */
/* Nút tài khoản trên thanh trên: chữ "Đăng nhập", hoặc ảnh/chữ cái đầu + tên khi đã đăng nhập. */
.acct { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; margin-left: 4px; border: 1px solid var(--line); border-radius: calc(9px * var(--rk)); font-size: 13px; font-weight: 500; color: var(--text-2); white-space: nowrap; transition: background var(--dur-1) var(--ease); }
.acct:hover { background: var(--hover); color: var(--text); }
.acct-av { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; overflow: hidden; }
.acct-av img { width: 100%; height: 100%; object-fit: cover; }
.acct.is-in { padding: 0 10px 0 6px; }
@media (max-width: 920px) { .acct-name { display: none; } .acct.is-in { padding: 0 5px; } }