/* =====================================================================
   AI全景图 — design tokens
   Paste-able CSS variables: palette, typography, spacing, motion.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@400;500;600&display=swap');

:root {
  /* ---------- Color: anchors ---------- */
  --paper:        #F4EFE6;   /* cream — aged canvas, art-book endpaper      */
  --paper-deep:   #E9E1D0;   /* a hair darker, for UI surface contrast      */
  --ink:          #1A1814;   /* warm near-black — the wordmark on light     */
  --ink-700:      #3A352C;   /* hover state for ink                          */
  --ink-500:      #6B6457;   /* muted body / captions                        */
  --hairline:     #D9D2C2;   /* 1px borders on UI cards                      */

  /* ---------- Color: painterly accents (Monet sample) ---------- */
  --parasol-green: #5C7A4E;
  --sky-blue:      #A8C5DD;
  --field-yellow:  #D9C36A;
  --lavender:      #8E89A8;
  --umber:         #6B4F3A;
  --cloud:         #DCE3E8;

  /* ---------- Semantic ---------- */
  --bg:           var(--paper);
  --bg-elevated: #FBF8F1;
  --fg1:          var(--ink);
  --fg2:          var(--ink-500);
  --fg-on-dark:   var(--paper);
  --border:       var(--hairline);

  /* logo plates */
  --plate-light:  rgba(244, 239, 230, 0.88);
  --plate-dark:   rgba(26, 24, 20, 0.78);

  /* ---------- Typography: families ---------- */
  --font-serif-cn:  "Noto Serif SC", "Source Han Serif SC", "Songti SC",
                    "STSong", "SimSun", serif;
  --font-serif-en:  "Cormorant Garamond", "EB Garamond", "Cardo",
                    Georgia, "Times New Roman", serif;
  --font-ui:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                    "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;

  /* ---------- Type scale (UI / preview chrome) ---------- */
  --t-display:    clamp(40px, 5vw, 64px);
  --t-h1:         32px;
  --t-h2:         24px;
  --t-h3:         18px;
  --t-body:       15px;
  --t-small:      13px;
  --t-micro:      11px;

  /* ---------- Type scale (cover artwork) ---------- */
  /* At 900×383 cover canvas */
  --wordmark-size:  44px;   /* "AI全景图" — Noto Serif SC SemiBold */
  --wordmark-track: 0.16em; /* loose tracking — exhibition-label feel */
  --tagline-size:   13px;   /* "AI Panorama" — Cormorant Italic */
  --tagline-track:  0.30em;

  /* ---------- Spacing scale (4-based) ---------- */
  --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;
  --space-10: 128px;

  /* ---------- Radius ---------- */
  --r-none:   0;
  --r-edge:   2px;   /* the logo plate, when not 0 */
  --r-ui:     6px;   /* admin-tool cards / buttons */

  /* ---------- Elevation (UI only — never on covers) ---------- */
  --shadow-1: 0 1px 2px rgba(26, 24, 20, 0.06);
  --shadow-2: 0 4px 12px rgba(26, 24, 20, 0.08);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --dur-hover: 150ms;
  --dur-press: 80ms;
}

/* =====================================================================
   Semantic element styles — use these as a starting point, override
   per surface as needed.
   ===================================================================== */

html, body {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--font-ui);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-serif-cn);
  font-weight: 600;
  font-size: var(--t-h1);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: var(--fg1);
  margin: 0 0 var(--space-4);
}

h2, .h2 {
  font-family: var(--font-serif-cn);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--fg1);
  margin: 0 0 var(--space-3);
}

h3, .h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-h3);
  letter-spacing: 0;
  color: var(--fg1);
  margin: 0 0 var(--space-2);
}

p {
  font-family: var(--font-ui);
  font-size: var(--t-body);
  color: var(--fg2);
  margin: 0 0 var(--space-4);
  max-width: 64ch;
}

small, .small {
  font-size: var(--t-small);
  color: var(--fg2);
}

code, .mono {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.92em;
  color: var(--ink-700);
  background: var(--paper-deep);
  padding: 1px 6px;
  border-radius: var(--r-edge);
}

/* The wordmark — the only typography that appears on covers. */
.wordmark {
  font-family: var(--font-serif-cn);
  font-weight: 600;
  font-size: var(--wordmark-size);
  letter-spacing: var(--wordmark-track);
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}

.wordmark--light {
  color: var(--paper);
}

.tagline {
  font-family: var(--font-serif-en);
  font-style: italic;
  font-weight: 500;
  font-size: var(--tagline-size);
  letter-spacing: var(--tagline-track);
  text-transform: uppercase;
  color: var(--ink-500);
}

.tagline--light {
  color: rgba(244, 239, 230, 0.78);
}

/* The plate behind the lockup — the elsewhere move. */
.plate {
  background: var(--plate-light);
  border-radius: var(--r-none);
  padding: var(--space-4) var(--space-6);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}

.plate--dark {
  background: var(--plate-dark);
}