:root {
  /* Color tokens from DESIGN.md */
  --color-primary: #fcd535;
  --color-primary-active: #f0b90b;
  --color-primary-disabled: #3a3a1f;
  --color-ink: #181a20;
  --color-body: #eaecef;
  --color-body-on-light: #181a20;
  --color-muted: #707a8a;
  --color-muted-strong: #929aa5;
  --color-hairline-on-light: #eaecef;
  --color-hairline-on-dark: #2b3139;
  --color-border-strong: #cdd1d6;
  --color-canvas-light: #ffffff;
  --color-canvas-dark: #0b0e11;
  --color-surface-card-dark: #1e2329;
  --color-surface-elevated-dark: #2b3139;
  --color-surface-soft-light: #fafafa;
  --color-surface-strong-light: #f5f5f5;
  --color-on-primary: #181a20;
  --color-on-dark: #ffffff;
  --color-trading-up: #0ecb81;
  --color-trading-down: #f6465d;
  --color-success: #0ecb81;
  --color-error: #f6465d;
  --color-accent-turquoise: #2dbdb6;
  --color-info: #3b82f6;
  --color-info-ring: #3b82f6;

  /* Semantic dark-theme helpers */
  --surface-error: color-mix(in srgb, var(--color-error) 14%, var(--color-canvas-dark));
  --surface-success: color-mix(in srgb, var(--color-success) 14%, var(--color-canvas-dark));
  --surface-info: color-mix(in srgb, var(--color-info) 14%, var(--color-canvas-dark));
  --focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-info-ring) 50%, transparent);

  /* Typography tokens; Binance fonts are intentionally not loaded. */
  --font-sans: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --font-number: var(--font-mono);

  --type-hero-display-size: 64px;
  --type-hero-display-weight: 700;
  --type-hero-display-line-height: 1.1;
  --type-hero-display-letter-spacing: 0;
  --type-display-lg-size: 48px;
  --type-display-lg-weight: 700;
  --type-display-lg-line-height: 1.1;
  --type-display-lg-letter-spacing: 0;
  --type-display-md-size: 40px;
  --type-display-md-weight: 600;
  --type-display-md-line-height: 1.15;
  --type-display-md-letter-spacing: 0;
  --type-display-sm-size: 32px;
  --type-display-sm-weight: 600;
  --type-display-sm-line-height: 1.2;
  --type-display-sm-letter-spacing: 0;
  --type-title-lg-size: 24px;
  --type-title-lg-weight: 600;
  --type-title-lg-line-height: 1.3;
  --type-title-md-size: 20px;
  --type-title-md-weight: 600;
  --type-title-md-line-height: 1.35;
  --type-title-sm-size: 16px;
  --type-title-sm-weight: 600;
  --type-title-sm-line-height: 1.4;
  --type-number-display-size: 40px;
  --type-number-display-weight: 700;
  --type-number-display-line-height: 1.1;
  --type-number-md-size: 16px;
  --type-number-md-weight: 500;
  --type-number-md-line-height: 1.4;
  --type-number-sm-size: 14px;
  --type-number-sm-weight: 500;
  --type-number-sm-line-height: 1.4;
  --type-body-md-size: 14px;
  --type-body-md-weight: 400;
  --type-body-md-line-height: 1.5;
  /* DESIGN.md にない project 拡張（入力・長文向け） */
  --type-body-lg-size: 16px;
  --type-body-lg-weight: 400;
  --type-body-lg-line-height: 1.5;
  --type-body-sm-size: 13px;
  --type-body-sm-weight: 400;
  --type-body-sm-line-height: 1.5;
  --type-caption-size: 12px;
  --type-caption-weight: 500;
  --type-caption-line-height: 1.4;
  --type-button-size: 14px;
  --type-button-weight: 600;
  --type-button-line-height: 1;
  --type-nav-link-size: 14px;
  --type-nav-link-weight: 500;
  --type-nav-link-line-height: 1.4;

  /* Radius tokens */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 9999px;
  --radius-full: 9999px;

  /* Spacing tokens */
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 80px;

  /* Component primitives */
  --button-primary-bg: var(--color-primary);
  --button-primary-bg-active: var(--color-primary-active);
  --button-primary-fg: var(--color-on-primary);
  --button-primary-radius: var(--radius-md);
  --button-primary-height: 40px;
  --button-secondary-dark-bg: var(--color-surface-card-dark);
  --input-dark-bg: var(--color-surface-card-dark);
  --input-dark-fg: var(--color-on-dark);
  --input-radius: var(--radius-lg);
  --card-dark-bg: var(--color-surface-card-dark);
  --card-elevated-dark-bg: var(--color-surface-elevated-dark);
  --shadow-flat-card: none;
  --shadow-raised: 0 16px 40px color-mix(in srgb, var(--color-canvas-dark) 40%, transparent);
}