/* ============================================================
   ThinkingPower / 思惟力量  —  Design Tokens
   Visual direction: Minimal · White · Form
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@300;400;500;700&display=swap');

:root {
  /* ---------- Color: Brand ---------- */
  --tp-green:        #084741;     /* Primary accent — use sparingly */
  --tp-green-ink:    #063832;     /* Deep variant for text on white */
  --tp-green-soft:   #E6EDEC;     /* Pale wash (tint of primary) */
  --tp-green-line:   #CBD6D4;     /* Hairline tint */

  /* ---------- Color: Neutrals (the canvas) ---------- */
  --tp-paper:        #FFFFFF;     /* Primary background */
  --tp-paper-warm:   #FAFAF7;     /* Off-white / quieter surface */
  --tp-ink:          #111111;     /* Body text */
  --tp-ink-2:        #3A3A3A;     /* Secondary text */
  --tp-ink-3:        #8A8A8A;     /* Tertiary / captions */
  --tp-rule:         #E5E5E2;     /* Hairline separators */
  --tp-rule-strong:  #111111;     /* Emphatic rule (1px) */

  /* ---------- Color: Semantic (restrained) ---------- */
  --tp-fg:           var(--tp-ink);
  --tp-fg-muted:     var(--tp-ink-2);
  --tp-fg-subtle:    var(--tp-ink-3);
  --tp-bg:           var(--tp-paper);
  --tp-bg-alt:       var(--tp-paper-warm);
  --tp-accent:       var(--tp-green);
  --tp-accent-ink:   var(--tp-green-ink);
  --tp-border:       var(--tp-rule);

  /* ---------- Type families ----------
     System-first stacks so every glyph renders on Windows and macOS
     even if the Google Fonts webfont fails to load. Order matters:
       macOS   → PingFang TC  / Heiti TC / STHeiti
       Windows → Microsoft JhengHei / Microsoft YaHei
       Web     → Noto Sans TC
     Keeping sans-serif at the tail guarantees no missing glyphs. */
  --tp-font-sans-latin: 'Helvetica Neue', Helvetica, Arial,
                        'Segoe UI', Tahoma, sans-serif;

  --tp-font-sans-cjk:   'Helvetica Neue', Helvetica, Arial, 'Segoe UI',
                        'PingFang TC', 'Heiti TC', 'STHeiti',
                        'Microsoft JhengHei', '微軟正黑體',
                        'Microsoft YaHei', '微软雅黑',
                        'Hiragino Sans CNS', 'Hiragino Sans GB',
                        'Noto Sans TC', 'Noto Sans CJK TC',
                        sans-serif;

  --tp-font-serif:      Georgia, 'Times New Roman',
                        'Songti TC', 'Noto Serif TC', serif;
  /* Mono (numerical alignment). */
  --tp-font-mono:       ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Combined stack used by default */
  --tp-font-sans: var(--tp-font-sans-latin), var(--tp-font-sans-cjk);

  /* ---------- Type scale ----------
     Scale is intentionally narrow: tiny labels + one or two large focal numbers. */
  --tp-size-eyebrow:   11px;     /* UPPERCASE, tracked */
  --tp-size-caption:   12px;
  --tp-size-small:     13px;
  --tp-size-body:      15px;
  --tp-size-lead:      18px;
  --tp-size-h4:        20px;
  --tp-size-h3:        28px;
  --tp-size-h2:        40px;
  --tp-size-h1:        56px;
  --tp-size-display:   96px;     /* hero numerical */
  --tp-size-mega:      160px;    /* single-page data focal */

  --tp-lh-tight:  1.05;
  --tp-lh-snug:   1.2;
  --tp-lh-normal: 1.55;
  --tp-lh-loose:  1.75;

  --tp-track-tight:   -0.02em;
  --tp-track-normal:   0em;
  --tp-track-eyebrow:  0.16em;
  --tp-track-caps:     0.08em;

  /* ---------- Spacing (4px base) ---------- */
  --tp-s-1:  4px;
  --tp-s-2:  8px;
  --tp-s-3:  12px;
  --tp-s-4:  16px;
  --tp-s-5:  24px;
  --tp-s-6:  32px;
  --tp-s-7:  48px;
  --tp-s-8:  64px;
  --tp-s-9:  96px;
  --tp-s-10: 128px;
  --tp-s-11: 160px;    /* page gutters on slides */

  /* ---------- Radii (minimal — near-flat) ---------- */
  --tp-radius-0:   0px;
  --tp-radius-1:   2px;
  --tp-radius-2:   4px;
  --tp-radius-pill: 999px;

  /* ---------- Elevation (whisper-quiet) ---------- */
  --tp-shadow-0: none;
  --tp-shadow-1: 0 1px 0 rgba(17,17,17,0.04), 0 1px 2px rgba(17,17,17,0.04);
  --tp-shadow-2: 0 2px 12px rgba(17,17,17,0.05);
  --tp-shadow-focus: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--tp-green);

  /* ---------- Borders ---------- */
  --tp-hairline: 1px solid var(--tp-rule);
  --tp-hairline-ink: 1px solid var(--tp-rule-strong);

  /* ---------- Motion (restrained) ---------- */
  --tp-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --tp-dur-fast:  140ms;
  --tp-dur-base:  220ms;
  --tp-dur-slow:  420ms;

  /* ---------- Layout ---------- */
  --tp-page-max:       1200px;
  --tp-slide-w:        1920px;
  --tp-slide-h:        1080px;
  --tp-slide-margin:   160px;    /* generous white space */
}

/* ============================================================
   Semantic element styles
   ============================================================ */

html, body {
  background: var(--tp-bg);
  color: var(--tp-fg);
  font-family: var(--tp-font-sans);
  font-size: var(--tp-size-body);
  line-height: var(--tp-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tp-eyebrow {
  font-family: var(--tp-font-sans-latin);
  font-size: var(--tp-size-eyebrow);
  letter-spacing: var(--tp-track-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--tp-fg-muted);
}

.tp-caption {
  font-size: var(--tp-size-caption);
  color: var(--tp-fg-subtle);
  line-height: var(--tp-lh-normal);
}

.tp-h1, h1 {
  font-family: var(--tp-font-sans);
  font-size: var(--tp-size-h1);
  line-height: var(--tp-lh-tight);
  letter-spacing: var(--tp-track-tight);
  font-weight: 400;
  color: var(--tp-fg);
  margin: 0;
}

.tp-h2, h2 {
  font-family: var(--tp-font-sans);
  font-size: var(--tp-size-h2);
  line-height: var(--tp-lh-snug);
  letter-spacing: var(--tp-track-tight);
  font-weight: 400;
  margin: 0;
}

.tp-h3, h3 {
  font-family: var(--tp-font-sans);
  font-size: var(--tp-size-h3);
  line-height: var(--tp-lh-snug);
  font-weight: 500;
  margin: 0;
}

.tp-h4, h4 {
  font-family: var(--tp-font-sans);
  font-size: var(--tp-size-h4);
  line-height: var(--tp-lh-snug);
  font-weight: 500;
  margin: 0;
}

.tp-lead {
  font-size: var(--tp-size-lead);
  line-height: var(--tp-lh-loose);
  color: var(--tp-fg-muted);
  font-weight: 300;
}

p, .tp-p {
  font-size: var(--tp-size-body);
  line-height: var(--tp-lh-loose);
  color: var(--tp-fg-muted);
  margin: 0 0 var(--tp-s-4);
}

.tp-display {
  font-family: var(--tp-font-sans-latin);
  font-size: var(--tp-size-display);
  line-height: 0.95;
  letter-spacing: -0.04em;
  font-weight: 300;
  color: var(--tp-fg);
}

.tp-mega {
  font-family: var(--tp-font-sans-latin);
  font-size: var(--tp-size-mega);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 300;
  color: var(--tp-fg);
}

.tp-accent { color: var(--tp-accent); }

.tp-rule {
  height: 1px;
  background: var(--tp-rule);
  border: 0;
}

.tp-rule-ink {
  height: 1px;
  background: var(--tp-rule-strong);
  border: 0;
}

code, .tp-mono {
  font-family: var(--tp-font-mono);
  font-size: 0.92em;
}

/* Tabular numerals for data */
.tp-num {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}