@theme {
  --font-heading: "Noto Sans TC", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Noto Sans TC", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-surface-muted: #f5f5f5;
  --color-surface-inverse: #000000;
  --color-text: #000000;
  --color-text-muted: #2a2a2a;
  --color-text-subtle: #555555;
  --color-text-inverse: #ffffff;
  --color-accent: #000000;
  --color-accent-muted: #e5e5e5;
  --color-border: #e0e0e0;
  --color-border-strong: #999999;
  --color-positive: #0f7a4f;
  --color-warning: #a45b00;
  --color-negative: #b42318;
  --color-chart-1: #000000;
  --color-chart-2: #333333;
  --color-chart-3: #666666;
  --color-chart-4: #999999;

  --text-op-display: 88px;
  --text-op-display--line-height: 1;
  --text-op-title: 60px;
  --text-op-title--line-height: 1.1;
  --text-op-section: 68px;
  --text-op-section--line-height: 1;
  --text-op-lead: 36px;
  --text-op-lead--line-height: 1.3;
  --text-op-body: 28px;
  --text-op-body--line-height: 1.4;
  --text-op-caption: 20px;
  --text-op-caption--line-height: 1.35;
  --text-op-source: 14px;
  --text-op-source--line-height: 1.35;
  --text-op-number: 80px;
  --text-op-number--line-height: 0.9;

  --spacing-op-2xs: 12px;
  --spacing-op-xs: 18px;
  --spacing-op-sm: 36px;
  --spacing-op-md: 56px;
  --spacing-op-lg: 88px;
  --spacing-op-xl: 128px;
  --spacing-op-2xl: 160px;

  --radius-op-none: 0;
  --radius-op-sm: 4px;
  --radius-op-card: 8px;
  --radius-op-panel: 12px;
  --radius-op-pill: 999px;

  --shadow-op-none: none;
  --shadow-op-card: 0 18px 48px rgb(10 10 10 / 0.12);
  --shadow-op-floating: 0 28px 80px rgb(10 10 10 / 0.18);
}

/* Keep slide canvas typography local to slide components even when prose classes
   appear inside notes or appendix content. */
.op-slide-page :is(h1, h2, h3, h4, h5, h6),
.op-slide-page p {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: normal;
  margin: 0;
  color: inherit;
  break-after: unset;
}
.op-slide-page h2::before { content: none; }
.op-slide-page strong { font-weight: inherit; color: inherit; }
.op-slide-page em { font-style: italic; font-family: inherit; color: inherit; }

/* Restore op-* font sizes — specificity 0,2,0 beats the reset above (0,1,1) */
.op-slide-page .op-display { font-size: var(--text-op-display); line-height: var(--text-op-display--line-height); font-family: var(--font-heading); }
.op-slide-page .op-title   { font-size: var(--text-op-title);   line-height: var(--text-op-title--line-height);   font-family: var(--font-heading); }
.op-slide-page .op-section { font-size: var(--text-op-section); line-height: var(--text-op-section--line-height); font-family: var(--font-heading); }
.op-slide-page .op-lead    { font-size: var(--text-op-lead);    line-height: var(--text-op-lead--line-height);    font-family: var(--font-body); }
.op-slide-page .op-body    { font-size: var(--text-op-body);    line-height: var(--text-op-body--line-height);    font-family: var(--font-body); }
.op-slide-page .op-caption { font-size: var(--text-op-caption); line-height: var(--text-op-caption--line-height); font-family: var(--font-body); }
.op-slide-page .op-source  { font-size: var(--text-op-source);  line-height: var(--text-op-source--line-height);  font-family: var(--font-body); }
.op-slide-page .op-kicker  { font-size: var(--text-op-caption); letter-spacing: 0.14em; font-family: var(--font-body); }

@layer components {
  .op-display {
    @apply font-heading text-op-display font-light text-text;
  }

  .op-title {
    @apply font-heading text-op-title font-light text-text;
  }

  .op-section {
    @apply font-heading text-op-section font-light text-text;
  }

  .op-lead {
    @apply font-body text-op-lead text-text-muted;
  }

  .op-body {
    @apply font-body text-op-body text-text;
  }

  .op-caption {
    @apply font-body text-op-caption text-text-muted;
  }

  .op-source {
    @apply font-body text-op-source text-text-subtle;
  }

  .op-kicker {
    @apply font-body text-op-caption font-semibold uppercase text-accent;
    letter-spacing: 0.14em;
  }

  .op-card {
    @apply rounded-op-card border border-border bg-surface p-op-md shadow-op-card;
  }

  .op-card-muted {
    @apply rounded-op-card border border-border bg-surface-muted p-op-md shadow-op-none;
  }

  .op-card-accent {
    @apply rounded-op-card border border-accent bg-accent p-op-md text-text-inverse shadow-op-card;
  }

  .op-panel {
    @apply rounded-op-panel border border-border bg-surface p-op-lg shadow-op-card;
  }

  .op-frame {
    @apply overflow-hidden rounded-op-panel border border-border bg-surface shadow-op-card;
  }

  .op-callout {
    @apply rounded-op-card border-l-8 border-accent bg-surface p-op-md shadow-op-card;
  }

  .op-divider {
    @apply h-px w-full bg-border;
  }

  .op-chip {
    @apply inline-flex items-center rounded-op-pill border border-border bg-surface-muted px-op-sm py-op-xs text-op-caption font-medium text-text-muted;
  }

}