/* HZF Portfolio v7.0 — semantic design tokens */
:root {
  color-scheme: light;
  --color-canvas: #ffffff;
  --color-surface: #ffffff;
  --color-surface-soft: #efeee9;
  --color-surface-accent: #eef2ff;
  --color-text-primary: #111210;
  --color-text-secondary: #555851;
  --color-text-tertiary: #74786f;
  --color-border: #d8d9d3;
  --color-border-strong: #aeb1a8;
  --color-accent: #2457ff;
  --color-accent-hover: #123fd6;
  --color-inverse: #111210;
  --color-on-inverse: #ffffff;
  --color-danger: #b42318;

  --font-display: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --text-display: clamp(2.75rem, 6.5vw, 6rem);
  --text-h1: clamp(2.25rem, 5vw, 5rem);
  --text-h2: clamp(1.75rem, 3vw, 3rem);
  --text-h3: clamp(1.25rem, 1.8vw, 1.75rem);
  --text-body-lg: 1.125rem;
  --text-body: 1rem;
  --text-body-sm: .875rem;
  --text-meta: .8125rem;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  --page-gutter: clamp(1.125rem, 3.4vw, 3rem);
  --content-max-width: 85rem;
  --reading-max-width: 47.5rem;
  --nav-height: 4.5rem;
  --grid-gap: clamp(1rem, 2vw, 1.5rem);

  --radius-media: .625rem;
  --radius-card: .75rem;
  --radius-control: 999px;
  --border-default: 1px solid var(--color-border);
  --shadow-float: 0 1.125rem 3.75rem rgba(17, 18, 16, .14);
  --transition-fast: 150ms ease;
  --transition-base: 260ms cubic-bezier(.2,.8,.2,1);

  /* Backward-compatible semantic aliases used by the original markup/styles. */
  --background: var(--color-canvas);
  --surface: var(--color-surface);
  --foreground: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --border: var(--color-border);
  --ai-accent: var(--color-accent);
  --font-sans: var(--font-body);
  --font-cjk: var(--font-body);
}