/* 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 {
  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; }
}