/* TJ daily site factory — base layer
 * White, clean, precise. This file carries STRUCTURE and RHYTHM only.
 * The per-product design thesis lives in assets/product.css, loaded AFTER this file,
 * and is where every product invents its own palette / material / type scale.
 * Never let two products ship with the same product.css.
 *
 * Load order (fixed):
 *   1. tj-base.css        structure, tokens, a11y, states
 *   2. product.css        the day's original design thesis
 *   3. tj-auth-theme.css  fourleg adapter (only on auth/account/admin pages)
 */

:root {
  --tj-ink:        #14161a;
  --tj-ink-soft:   #5a6270;
  --tj-ink-faint:  #8b93a1;
  --tj-surface:    #ffffff;
  --tj-surface-2:  #f7f8fa;
  --tj-line:       #e6e9ef;
  --tj-accent:     #2f5bff;
  --tj-accent-ink: #ffffff;
  --tj-ok:         #0d8a5f;
  --tj-warn:       #b46b00;
  --tj-bad:        #c02b2b;

  --tj-radius:     10px;
  --tj-gap:        clamp(16px, 2.5vw, 28px);
  --tj-measure:    68ch;
  --tj-shadow:     0 1px 2px rgba(20, 22, 26, .04), 0 8px 24px rgba(20, 22, 26, .05);

  --tj-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  --tj-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

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

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

body {
  margin: 0;
  font-family: var(--tj-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tj-ink);
  background: var(--tj-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 .5em; font-weight: 650; }
h1 { font-size: clamp(28px, 4.4vw, 44px); }
h2 { font-size: clamp(21px, 2.6vw, 28px); }
h3 { font-size: 18px; }
p  { margin: 0 0 1em; max-width: var(--tj-measure); }

a { color: var(--tj-accent); text-underline-offset: 2px; }
a:hover { text-decoration: none; }

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

.tj-wrap { width: min(1100px, 100% - 2 * var(--tj-gap)); margin-inline: auto; }
.tj-section { padding-block: clamp(40px, 7vw, 84px); }
.tj-grid { display: grid; gap: var(--tj-gap); }
@media (min-width: 760px) { .tj-grid-2 { grid-template-columns: 1fr 1fr; } .tj-grid-3 { grid-template-columns: repeat(3, 1fr); } }

.tj-card {
  background: var(--tj-surface);
  border: 1px solid var(--tj-line);
  border-radius: var(--tj-radius);
  padding: clamp(16px, 2.2vw, 24px);
}

/* ---- controls ---- */
.tj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--tj-radius);
  background: var(--tj-accent); color: var(--tj-accent-ink);
  font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none;
}
.tj-btn:hover  { filter: brightness(1.06); }
.tj-btn:active { transform: translateY(1px); }
.tj-btn[disabled], .tj-btn[aria-busy="true"] { opacity: .55; pointer-events: none; }
.tj-btn-ghost { background: transparent; color: var(--tj-ink); border-color: var(--tj-line); }

.tj-field { display: block; margin-bottom: 14px; }
.tj-field > span { display: block; font-size: 13px; color: var(--tj-ink-soft); margin-bottom: 6px; }
.tj-input {
  width: 100%; min-height: 44px; padding: 8px 12px;
  border: 1px solid var(--tj-line); border-radius: var(--tj-radius);
  background: var(--tj-surface); color: var(--tj-ink); font: inherit;
}
.tj-input:focus-visible, .tj-btn:focus-visible, a:focus-visible {
  outline: 2px solid var(--tj-accent); outline-offset: 2px;
}

/* ---- required states: every async surface must be able to show all four ---- */
.tj-state { border: 1px solid var(--tj-line); border-radius: var(--tj-radius); padding: 16px; }
.tj-state[data-state="loading"] { color: var(--tj-ink-soft); }
.tj-state[data-state="empty"]   { color: var(--tj-ink-faint); }
.tj-state[data-state="error"]   { color: var(--tj-bad); border-color: color-mix(in srgb, var(--tj-bad) 35%, var(--tj-line)); }
.tj-state[hidden] { display: none; }

.tj-skeleton {
  background: linear-gradient(90deg, var(--tj-surface-2) 25%, #eef0f4 37%, var(--tj-surface-2) 63%);
  background-size: 400% 100%; animation: tj-shimmer 1.4s ease infinite;
  border-radius: 6px; height: 1em;
}
@keyframes tj-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.tj-note   { font-size: 14px; color: var(--tj-ink-soft); }
.tj-error  { color: var(--tj-bad); }
.tj-ok     { color: var(--tj-ok); }

/* ---- language switch ---- */
[data-i18n-hide="zh"], [data-i18n-hide="en"] { }
html[lang^="en"] [data-lang="zh"] { display: none; }
html[lang^="zh"] [data-lang="en"] { display: none; }

.tj-langswitch { display: inline-flex; gap: 2px; border: 1px solid var(--tj-line); border-radius: var(--tj-radius); overflow: hidden; }
.tj-langswitch button {
  min-height: 32px; padding: 0 10px; border: 0; background: transparent;
  font: inherit; font-size: 13px; cursor: pointer; color: var(--tj-ink-soft);
}
.tj-langswitch button[aria-pressed="true"] { background: var(--tj-surface-2); color: var(--tj-ink); font-weight: 600; }

.tj-skip {
  position: absolute; left: -9999px;
}
.tj-skip:focus { left: 12px; top: 12px; z-index: 99; background: var(--tj-surface); padding: 10px 14px; border: 1px solid var(--tj-line); border-radius: var(--tj-radius); }

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

@media print { .tj-noprint { display: none; } }