/* ============================================================
   Ztor 2.0 — Design Tokens
   Source of truth: Figma file PjfXW29QsWoPUSaFvYC0Wb (Foundations)
   ============================================================ */

:root {
  /* ─────────────────────────────────────────
     COLOR — Primitives
     ───────────────────────────────────────── */

  /* Accent — Yellow (brand) */
  --yellow-50:  #fffbcc;
  --yellow-100: #fff599;
  --yellow-200: #ffee66;
  --yellow-300: #ffec4d;
  --yellow-400: #ffe933;
  --yellow-500: #ffe600;   /* brand */
  --yellow-600: #d9c400;
  --yellow-700: #b3a200;
  --yellow-800: #807400;
  --yellow-900: #4d4500;
  --yellow-ink: #1a1700;   /* text on yellow bg */

  /* Neutral */
  --neutral-50:  #fafafa;
  --neutral-100: #f5f5f5;
  --neutral-200: #e5e5e5;
  --neutral-300: #d4d4d4;
  --neutral-400: #a3a3a3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #1e1e1e;
  --neutral-800: #171717;
  --neutral-900: #0a0a0a;  /* canvas dark */
  --neutral-white: #ffffff;
  --neutral-black: #000000;

  /* Status */
  --success-500: #22c55e;
  --success-700: #15803d;
  --warning-500: #fb923c;
  --warning-700: #c2410c;
  --error-500:   #ef4444;
  --error-700:   #b91c1c;
  --error-ink:   #2a0a0a;  /* text on red bg */
  --info-500:    #3b82f6;
  --info-700:    #1d4ed8;

  /* ─────────────────────────────────────────
     COLOR — Semantic (Dark mode)
     ───────────────────────────────────────── */

  --bg-primary:   var(--neutral-900);   /* page bg */
  --bg-secondary: var(--neutral-800);   /* surface (raised section) */
  --bg-tertiary:  var(--neutral-700);   /* card / elevated panel */
  --bg-card:      var(--bg-tertiary);   /* semantic alias */

  --text-primary:   rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.65);
  --text-tertiary:  rgba(255, 255, 255, 0.45);
  --text-disabled:  rgba(255, 255, 255, 0.35);

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong:  rgba(255, 255, 255, 0.22);

  --interactive-primary:    var(--yellow-500);
  --interactive-on-primary: var(--yellow-ink);

  /* Glass overlay tokens (used by Ghost/IconButton) */
  --glass-bg-default:  rgba(255, 255, 255, 0.10);
  --glass-bg-hover:    rgba(255, 255, 255, 0.18);
  --glass-bg-pressed:  rgba(255, 255, 255, 0.26);
  --glass-bg-disabled: rgba(255, 255, 255, 0.04);

  --glass-stroke-default:  rgba(255, 255, 255, 0.20);
  --glass-stroke-hover:    rgba(255, 255, 255, 0.32);
  --glass-stroke-pressed:  rgba(255, 255, 255, 0.45);
  --glass-stroke-disabled: rgba(255, 255, 255, 0.08);

  /* GLASS effect web equivalent (Figma GLASS effect ≈ backdrop-filter) */
  --glass-blur: blur(20px) saturate(1.4);

  /* ─────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────── */

  /* Font stacks — Latin tier first so mixed CJK+EN runs render English / 數字
     in Proxima Nova (Adobe Typekit kit `mul0tkj`), then fall through to Inter,
     and finally to the CJK face for Chinese glyphs (browsers walk the stack
     per-glyph).
     'proxima-nova' (lowercase) is Typekit's exposed family name.
     'Proxima Nova' kept for any future self-hosted copy.
     Display tier:  brand UI — Hero / H1–H4 / Button LG / Nav.
     Text tier:     reading & secondary UI. */
  --font-cjk-display: 'proxima-nova', 'Proxima Nova', 'Inter',
                      'LINE Seed TW', 'Noto Sans TC',
                      'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-cjk-text:    'proxima-nova', 'Proxima Nova', 'Inter',
                      'Noto Sans TC',
                      'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-latin:       'proxima-nova', 'Proxima Nova', 'Inter',
                      system-ui, -apple-system, sans-serif;

  /* Font weights */
  --fw-thin:      100;
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  /* Font sizes */
  --fs-display:  76px;
  --fs-h1:       48px;
  --fs-h2:       42px;
  --fs-h3:       24px;
  --fs-h4:       20px;
  --fs-h5:       16px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;

  /* Line heights */
  --lh-display:  83px;
  --lh-h1:       57px;
  --lh-h2:       50px;
  --lh-h3:       31px;
  --lh-h4:       26px;
  --lh-h5:       24px;
  --lh-body-lg:  30px;
  --lh-body:     27px;
  --lh-body-sm:  23px;
  --lh-caption:  18px;
  --lh-label:    15px;

  /* Letter spacing */
  --ls-display: -2px;
  --ls-h1:      -1px;
  --ls-h2:      -1px;
  --ls-h3:      -0.5px;
  --ls-h4:       0;
  --ls-h5:       0;
  --ls-body:     0;
  --ls-body-lg:  0;
  --ls-body-sm:  0;
  --ls-caption:  0;
  --ls-label:    1.2px;

  /* ─────────────────────────────────────────
     SPACING (4px base scale)
     ───────────────────────────────────────── */

  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* ─────────────────────────────────────────
     RADIUS
     ───────────────────────────────────────── */

  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-pill: 9999px;

  /* ─────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────── */

  --container-max:        1280px;
  --container-wide:       1440px;
  --container-padding-x:  48px;
  --header-height:        64px;
}

/* ─────────────────────────────────────────
   TYPOGRAPHY UTILITY CLASSES
   17 styles matching Figma Foundations
   ───────────────────────────────────────── */

.t-display {
  font-family: var(--font-cjk-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-bold);
}

.t-h1 {
  font-family: var(--font-cjk-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-bold);
}

.t-h2 {
  font-family: var(--font-cjk-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-bold);
}

.t-h3 {
  font-family: var(--font-cjk-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-bold);
}

.t-h4 {
  font-family: var(--font-cjk-display);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: var(--fw-bold);
}

.t-h5 {
  font-family: var(--font-cjk-text);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  font-weight: var(--fw-bold);
}

.t-body-lg {
  font-family: var(--font-cjk-text);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-regular);
}

.t-body {
  font-family: var(--font-cjk-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
}

.t-body-sm {
  font-family: var(--font-cjk-text);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-regular);
}

.t-body-reading {
  font-family: var(--font-cjk-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-light);
}

.t-body-preview {
  font-family: var(--font-cjk-text);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body-lg);
  font-weight: var(--fw-light);
}

.t-caption {
  font-family: var(--font-cjk-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-regular);
}

.t-eyebrow {
  font-family: var(--font-cjk-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
}

.t-nav {
  font-family: var(--font-cjk-display);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  font-weight: var(--fw-regular);
}

.t-button-lg {
  font-family: var(--font-cjk-display);
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  font-weight: var(--fw-bold);
}

.t-button-md {
  font-family: var(--font-cjk-text);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: var(--fw-medium);
}

.t-button-sm {
  font-family: var(--font-cjk-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: var(--fw-medium);
}

/* ─────────────────────────────────────────
   GLOBAL RESET / BASE
   ───────────────────────────────────────── */

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-cjk-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

/* Text selection — brand yellow with ink text, replacing the browser
   default magenta/blue. */
::selection {
  background: var(--yellow-500);
  color: var(--yellow-ink);
}
::-moz-selection {
  background: var(--yellow-500);
  color: var(--yellow-ink);
}

/* ─────────────────────────────────────────
   LAYOUT UTILITIES
   ───────────────────────────────────────── */

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-padding-x);
  padding-right: var(--container-padding-x);
}

.container--wide {
  max-width: var(--container-wide);
}

.full-bleed {
  width: 100%;
}

/* ─────────────────────────────────────────
   SECTION RHYTHM
   Each homepage chapter sits inside a .section.
   Backgrounds alternate page <-> surface for cinematic zebra rhythm.
   ───────────────────────────────────────── */

.section {
  position: relative;
  padding-block: clamp(64px, 9vw, 120px);
}

.section--tight { padding-block: clamp(48px, 6vw, 80px); }
.section--loose { padding-block: clamp(96px, 12vw, 160px); }

.section-bg-page    { background: var(--bg-primary); }    /* neutral-900 */
.section-bg-surface { background: var(--bg-secondary); }  /* neutral-800 */

/* ─────────────────────────────────────────
   SECTION EYEBROW
   Yellow brand label that opens each homepage section.
   ───────────────────────────────────────── */

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-cjk-text);
  font-size: var(--fs-caption);
  line-height: 1.33;
  letter-spacing: 0.12em;
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  color: var(--yellow-500);
}

/* ─────────────────────────────────────────
   SECTION HEADER
   Pattern: [chapter-eyebrow] → [title row: title/sub on left, link on right]
   Used at the top of every chapter on the homepage.
   ───────────────────────────────────────── */

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-16);
}

.section-header__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.section-header__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.section-header__title {
  font-family: var(--font-cjk-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  margin: 0;
}

.section-header__sub {
  font-family: var(--font-cjk-text);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0;
}

/* "查看所有 →" right-side link */
.section-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-cjk-text);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--yellow-500);
  white-space: nowrap;
  transition: gap 150ms ease;
}

.section-link:hover { gap: var(--space-3); }

.section-link__arrow {
  width: 14px;
  height: 14px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask: url('assets/icons/arrow_right.svg') center / contain no-repeat;
          mask: url('assets/icons/arrow_right.svg') center / contain no-repeat;
}