/* Tenon UI v1: shared tokens and controls. See docs/uiux.md. */
@font-face { font-family: Manrope; src: url('/assets/fonts/manrope-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }
:root {
  /* Page container shared by header, content and footer. */
  --page-max: 1200px; --gutter: clamp(20px, 4.5vw, 64px);
  color-scheme: light;
  --brand-orange: #f06b32;
  --font-sans: Manrope, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --paper: #fafafa; --surface: #fff; --ink: #181818; --muted: #696969;
  --line: #e3e3e3; --media: #f2f2f2; --media-edge: #dfdfdf; --quiet: #a3a3a3;
  --accent: var(--brand-orange); --accent-soft: #fff1e9; --danger: #bf3434;
  --header: #fafafae6; --header-solid: #fafafaf5; --header-line: #0000000f; --shadow: #00000005;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --button-radius: 999px; --icon-button-radius: 50%; --button-hover: #eaeaea; --button-pressed: #dedede;
  --input-radius: 12px; --input-height: 46px;
  --focus-width: 2px; --focus-offset: 4px;
  /* Focus ring keeps 3:1 against paper and hover gray; the brand orange stays on the mark. */
  --focus-ring: #dc5418;
  /* Scales for new styles; existing page values migrate when touched. */
  --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px; --text-xl: 24px; --text-2xl: 32px;
  --text-display: clamp(36px, 5vw, 58px);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px;
  --duration-fast: 160ms; --duration-base: 200ms; --duration-slow: 450ms;
  --layer-header: 40; --layer-intro: 60; --layer-skip-link: 100;
  --content-max: 1280px; --prose-max: 800px;
  /* v2: layered surfaces, hairlines and the brand glow. */
  --surface-1: #ffffff; --surface-2: #f4f4f5; --surface-3: #ececee;
  --hairline: #0000000f; --hairline-strong: #0000001c;
  --accent-text: #b8430f;
  --text-soft: #52525b; --glow: #f06b3226; --glow-strong: #f06b3240;
  --shadow-lg: 0 1px 2px #00000008, 0 12px 40px #0000000f;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #000; --surface: #191919; --ink: #f2f2f2; --muted: #999;
  --line: #2a2a2a; --media: #141414; --media-edge: #2a2a2a; --quiet: #666;
  --accent: #ff8a50; --accent-soft: #2c201a; --danger: #ff9999;
  --header: #000000e6; --header-solid: #000000f5; --header-line: #ffffff14; --shadow: #00000014;
  --button-hover: #262626; --button-pressed: #303030;
  --focus-ring: var(--accent);
  --surface-1: #0c0c0d; --surface-2: #131315; --surface-3: #1b1b1e;
  --hairline: #ffffff12; --hairline-strong: #ffffff21;
  --accent-text: var(--accent); --text-soft: #a1a1aa; --glow: #f06b322e; --glow-strong: #f06b3259;
  --shadow-lg: 0 1px 0 #ffffff0a inset, 0 24px 60px #00000080;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --paper: #000; --surface: #191919; --ink: #f2f2f2; --muted: #999;
    --line: #2a2a2a; --media: #141414; --media-edge: #2a2a2a; --quiet: #666;
    --accent: #ff8a50; --accent-soft: #2c201a; --danger: #ff9999;
    --header: #000000e6; --header-solid: #000000f5; --header-line: #ffffff14; --shadow: #00000014;
    --button-hover: #262626; --button-pressed: #303030;
    --focus-ring: var(--accent);
    --surface-1: #0c0c0d; --surface-2: #131315; --surface-3: #1b1b1e;
    --hairline: #ffffff12; --hairline-strong: #ffffff21;
    --accent-text: var(--accent); --text-soft: #a1a1aa; --glow: #f06b322e; --glow-strong: #f06b3259;
    --shadow-lg: 0 1px 0 #ffffff0a inset, 0 24px 60px #00000080;
  }
}

:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }

:where(button, .primary-button, .secondary-button, .action-slot, .header-login, .header-signup, #site-navigation a, .home-link, .text-link, .subtle-link, .skip-link) {
  border-color: transparent;
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--ink);
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
:where(.icon-button, .action-slot.compact) { border-radius: var(--icon-button-radius); aspect-ratio: 1; }
:where(.home-link) { display: inline-flex; align-items: center; padding: 7px 10px; white-space: nowrap; }
:where(.text-link, .subtle-link) { display: inline-block; padding: 4px 8px; }
:where(button) { border-style: solid; border-width: 0; }
:where(button):disabled { opacity: .62; }

@media (hover: hover) {
  :where(button, .primary-button, .secondary-button, .action-slot, .header-login, .header-signup, #site-navigation a, .home-link, .text-link, .subtle-link, .skip-link):not(:disabled):hover {
    background: var(--button-hover);
    color: var(--ink);
  }
}
:where(button, .primary-button, .secondary-button, .action-slot, .header-login, .header-signup, #site-navigation a, .home-link, .text-link, .subtle-link, .skip-link):not(:disabled):active {
  background: var(--button-pressed);
}
:where(button, .primary-button, .secondary-button, .action-slot, .header-login, .header-signup, #site-navigation a, .home-link, .text-link, .subtle-link, .skip-link):focus-visible {
  background: var(--button-hover);
}

:where(input:not([type]), input:is([type='text'], [type='email'], [type='password'], [type='search'], [type='url'], [type='tel'], [type='number']), textarea, select) {
  width: 100%;
  height: var(--input-height);
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: var(--input-radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  line-height: 22px;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease);
}
/* Multiline fields grow with their content; the page scrolls, not the field. */
:where(textarea) { height: auto; min-height: calc(var(--input-height) * 2); resize: none; }
@supports (field-sizing: content) { :where(textarea) { field-sizing: content; overflow: hidden; } }
:where(input, textarea, select):focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
:where(input, textarea, select)[aria-invalid='true'] { border-color: var(--danger); }
:where(input, textarea, select):disabled { opacity: .62; cursor: not-allowed; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 1px solid transparent; border-radius: var(--button-radius); font: inherit; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; transition: background-color var(--duration-base) var(--ease), border-color var(--duration-base) var(--ease), color var(--duration-base) var(--ease), box-shadow var(--duration-base) var(--ease); }
.btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-base) var(--ease); }
.btn-sm { min-height: 34px; padding: 7px 14px; font-size: 13px; }
/* One filled primary action per view; everything else stays quiet. */
.btn-primary { background: var(--ink); color: var(--paper); box-shadow: 0 1px 0 #ffffff33 inset, 0 8px 24px -8px var(--glow-strong); }
.btn-secondary { border-color: var(--hairline-strong); background: var(--surface-1); color: var(--ink); }
@media (hover: hover) {
  .btn-primary:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
  .btn-secondary:hover { border-color: var(--quiet); background: var(--surface-2); }
  .btn:hover svg { transform: translateX(2px); }
}
.btn:active { transform: translateY(1px); }

/* Chinese display headings break at punctuation and spaces, never mid-word. */
:lang(zh) :is(h1, h2, .text-slot.detail-title, .text-slot.statement) { word-break: keep-all; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn svg { transition: none; }
  :where(button, .primary-button, .secondary-button, .action-slot, .header-login, .header-signup, #site-navigation a, .home-link, .text-link, .subtle-link, .skip-link, input, textarea, select) { transition: none; }
}

/* Page changes cross-fade on the same site; the header stays put between pages. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: site-header; }
  ::view-transition-old(root) { animation: 180ms var(--ease) both page-out; }
  ::view-transition-new(root) { animation: 420ms 60ms var(--ease) both page-in; }
}
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(10px); } }

/* First-visit cookie notice: a quiet card, never a wall. */
.cookie-notice { position: fixed; left: 24px; bottom: 24px; z-index: 60; display: grid; gap: 14px; width: min(400px, calc(100% - 32px)); padding: 18px 20px; border: 1px solid var(--hairline-strong); border-radius: 16px; background: color-mix(in srgb, var(--surface-1) 90%, transparent); box-shadow: var(--shadow-lg), 0 24px 60px -28px #00000080; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; transform: translateY(14px); transition: opacity 400ms var(--ease), transform 500ms var(--ease); }
.cookie-notice[hidden] { display: none; }
.cookie-notice.is-shown { opacity: 1; transform: none; }
.cookie-notice p { display: grid; gap: 4px; margin: 0; }
.cookie-notice b { color: var(--ink); font-size: 14px; font-weight: 650; }
.cookie-notice span { color: var(--text-soft); font-size: 13px; line-height: 1.65; text-wrap: pretty; }
:lang(zh) .cookie-notice span { word-break: keep-all; }
.cookie-notice-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cookie-notice-actions a { color: var(--text-soft); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline-strong); }
.cookie-notice-actions a:hover { color: var(--ink); }
@media (max-width: 640px) {
  .cookie-notice { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cookie-notice { transition: none; transform: none; } }