/* ==========================================================================
   欧展通 EuroExpo Desk · base.css
   层顺序声明 + 重置 + 元素默认样式 + 减少动效 + 工具类
   依赖：tokens.css 先加载。
   ========================================================================== */
@layer reset, tokens, base, layout, components, pages, utilities;

/* --------------------------------------------------------------------------
   1. 重置（modern-normalize 式，自写）
   -------------------------------------------------------------------------- */
@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.6;
  }

  body {
    margin: 0;
    min-height: 100dvh;
  }

  h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre, fieldset, legend, hr {
    margin: 0;
  }

  ul, ol, menu {
    margin: 0;
    padding: 0;
  }

  fieldset,
  legend {
    padding: 0;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr[title] {
    text-decoration: underline dotted;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub { bottom: -0.25em; }
  sup { top: -0.5em; }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  img, svg, video, canvas, audio, iframe, embed, object, picture {
    display: block;
    vertical-align: middle;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, optgroup, select, textarea {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
  }

  button, select {
    text-transform: none;
  }

  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
    appearance: button;
    background-image: none;
    cursor: pointer;
  }

  :disabled {
    cursor: default;
  }

  ::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  :-moz-focusring {
    outline: auto;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  legend {
    padding: 0;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  [type="search"] {
    -webkit-appearance: textfield;
    appearance: textfield;
    outline-offset: -2px;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
  }

  dialog {
    padding: 0;
  }

  :target {
    scroll-margin-block: 5ex;
  }
}

/* --------------------------------------------------------------------------
   2. 元素默认样式
   -------------------------------------------------------------------------- */
@layer base {
  html {
    font-family: var(--font-body);
    font-size: 100%;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
    background: var(--color-bg);
    color: var(--color-text);
    accent-color: var(--color-brand);
  }

  body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    line-height: var(--leading-body);
    letter-spacing: var(--tracking-body);
    font-weight: var(--weight-regular);
    background: var(--color-bg);
    color: var(--color-text);
    overflow-wrap: break-word;
    -webkit-tap-highlight-color: transparent;
  }

  /* 中文页：标点挤压与中西文间距作渐进增强 */
  :lang(zh) {
    text-autospace: normal;
    text-spacing-trim: space-first;
  }

  /* ---- 标题 ---- */
  h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-heading);
    color: var(--color-text);
    overflow-wrap: anywhere;
  }

  h1, h2, h3 {
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
    letter-spacing: var(--tracking-h1);
  }

  h2 {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
    letter-spacing: var(--tracking-h2);
  }

  h3 {
    font-size: var(--text-h3);
    line-height: var(--leading-h3);
    letter-spacing: var(--tracking-h3);
  }

  h4, h5, h6 {
    font-size: var(--text-h4);
    line-height: var(--leading-h4);
    letter-spacing: var(--tracking-h4);
  }

  /* 展示级标题（横幅）：加 .display 类 */
  .display {
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    font-weight: var(--weight-heading);
  }

  .lead {
    font-size: var(--text-lead);
    line-height: var(--leading-lead);
    color: var(--color-text-secondary);
  }

  small,
  .text-sm {
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
  }

  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--leading-xs);
  }

  /* ---- 链接 ---- */
  a {
    color: var(--color-link);
    text-decoration: none;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
    transition: color var(--dur-fast) var(--ease-standard);
  }

  a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
  }

  /* 正文里的链接默认带下划线，便于辨认 */
  p a,
  li a:not([class]),
  dd a:not([class]) {
    text-decoration: underline;
  }

  /* ---- 列表、引用、分隔线 ---- */
  ul, ol {
    padding-inline-start: 1.25em;
  }

  ul[role="list"],
  ol[role="list"],
  nav ul,
  nav ol {
    list-style: none;
    padding-inline-start: 0;
  }

  hr {
    border-top: 1px solid var(--color-divider);
  }

  blockquote {
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--gray-200);
    color: var(--color-text-secondary);
  }

  code {
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: var(--radius-xs);
    background: var(--gray-100);
    color: var(--color-text-strong);
  }

  pre {
    overflow: auto;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    box-shadow: var(--shadow-ring);
    font-size: var(--text-xs);
    line-height: 1.6;
  }

  pre code {
    padding: 0;
    background: none;
    font-size: inherit;
  }

  /* ---- 表格 ---- */
  table {
    width: 100%;
    font-size: var(--text-sm);
    line-height: var(--leading-sm);
  }

  th, td {
    text-align: start;
    vertical-align: top;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-divider);
  }

  th {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
  }

  td {
    color: var(--color-text-secondary);
  }

  tbody tr:nth-child(even) td {
    background: var(--gray-25);
  }

  /* ---- 表单控件：44px 高、16px 字（低于 16px iOS 会放大页面） ---- */
  input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"]),
  select,
  textarea {
    width: 100%;
    min-height: 44px;
    padding: 0 var(--space-3);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--border-control);
    border-radius: var(--radius-md);
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
  }

  textarea {
    min-height: 120px;
    padding-block: var(--space-3);
  }

  select {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: var(--space-10);
    cursor: pointer;
  }

  select[multiple],
  select[size] {
    min-height: auto;
    padding: var(--space-2);
  }

  input:not([type="checkbox"], [type="radio"]):hover,
  select:hover,
  textarea:hover {
    border-color: var(--gray-600);
  }

  input:not([type="checkbox"], [type="radio"]):focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: var(--focus-ring-soft);
  }

  input[aria-invalid="true"],
  select[aria-invalid="true"],
  textarea[aria-invalid="true"] {
    border-color: var(--danger-solid);
  }

  input[aria-invalid="true"]:focus-visible,
  select[aria-invalid="true"]:focus-visible,
  textarea[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px var(--danger-border);
  }

  input:disabled,
  select:disabled,
  textarea:disabled {
    background: var(--gray-50);
    color: var(--color-text-disabled);
    border-color: var(--gray-300);
    cursor: not-allowed;
  }

  ::placeholder {
    color: var(--color-text-tertiary);
    opacity: 1;
  }

  input[type="checkbox"],
  input[type="radio"] {
    width: 18px;
    height: 18px;
    flex: none;
    accent-color: var(--color-brand);
    cursor: pointer;
  }

  label,
  legend {
    color: var(--color-text);
  }

  /* 文件输入、范围、颜色不套通用样式 */
  input[type="file"] {
    font-size: var(--text-sm);
  }

  /* ---- 焦点环：统一 2px 蓝 600，外偏 2px ---- */
  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  :focus:not(:focus-visible) {
    outline: none;
  }

  /* ---- 选区 ---- */
  ::selection {
    background: var(--blue-100);
    color: var(--gray-900);
  }

  /* ---- details / summary 原生 ---- */
  summary {
    cursor: pointer;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  /* ---- 跳转链接 ---- */
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    top: calc(-1 * var(--space-24));
    z-index: var(--z-skip);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-ring), var(--shadow-lg);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }

  .skip-link:focus {
    top: var(--space-2);
  }

  /* ---- 减少动效：位移与缩放归零，时长压到 ≤80ms，转圈改透明度脉动 ---- */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --dur-instant: 0ms;
      --dur-fast: 80ms;
      --dur-base: 80ms;
      --dur-slow: 0ms;
      --dur-reveal: 0ms;
      --dur-slide: 0ms;
      --motion-y-4: 0px;
      --motion-y-8: 0px;
      --motion-y-12: 0px;
      --motion-press: 1;
    }

    html {
      scroll-behavior: auto;
    }
  }
}

/* --------------------------------------------------------------------------
   3. 工具类（最高层，不用 !important）
   -------------------------------------------------------------------------- */
@layer utilities {
  [hidden]:not([hidden="until-found"]) {
    display: none;
  }

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

  .visually-hidden.is-focusable:focus,
  .visually-hidden.is-focusable:active {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
  }

  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }

  .text-balance {
    text-wrap: balance;
  }

  .text-pretty {
    text-wrap: pretty;
  }

  .text-secondary { color: var(--color-text-secondary); }
  .text-tertiary { color: var(--color-text-tertiary); }
  .text-brand { color: var(--color-brand-text); }
  .nowrap { white-space: nowrap; }
  .break-anywhere { overflow-wrap: anywhere; }
  .text-center { text-align: center; }
  .text-end { text-align: end; }

  .mt-0 { margin-top: 0; }
  .mt-2 { margin-top: var(--space-2); }
  .mt-3 { margin-top: var(--space-3); }
  .mt-4 { margin-top: var(--space-4); }
  .mt-6 { margin-top: var(--space-6); }
  .mt-8 { margin-top: var(--space-8); }
  .mt-10 { margin-top: var(--space-10); }
  .mt-12 { margin-top: var(--space-12); }
  .mb-0 { margin-bottom: 0; }
  .mb-2 { margin-bottom: var(--space-2); }
  .mb-3 { margin-bottom: var(--space-3); }
  .mb-4 { margin-bottom: var(--space-4); }
  .mb-6 { margin-bottom: var(--space-6); }
  .mb-8 { margin-bottom: var(--space-8); }

  @media (min-width: 1024px) {
    .hide-desktop { display: none; }
    .span-1 { grid-column: span 1; }
    .span-2 { grid-column: span 2; }
    .span-3 { grid-column: span 3; }
    .span-4 { grid-column: span 4; }
    .span-5 { grid-column: span 5; }
    .span-6 { grid-column: span 6; }
    .span-7 { grid-column: span 7; }
    .span-8 { grid-column: span 8; }
    .span-9 { grid-column: span 9; }
    .span-10 { grid-column: span 10; }
    .span-11 { grid-column: span 11; }
    .span-12 { grid-column: span 12; }
    .col-start-2 { grid-column-start: 2; }
    .col-start-3 { grid-column-start: 3; }
    .col-start-7 { grid-column-start: 7; }
    .col-start-8 { grid-column-start: 8; }
    .col-start-9 { grid-column-start: 9; }
  }

  @media (max-width: 1023.98px) {
    .hide-mobile { display: none; }
  }
}