:root {
  --hy-ocean-50: #EEF6FA;
  --hy-ocean-100: #D5E9F3;
  --hy-ocean-200: #A9D2E6;
  --hy-ocean-300: #6FB3D3;
  --hy-ocean-500: #1A86B8;
  --hy-ocean-600: #0B6E99;
  --hy-ocean-700: #08577A;
  --hy-ocean-800: #0A4561;
  --hy-navy-900: #0E2A47;
  --hy-navy-800: #1B3A5C;
  --hy-ink-700: #344A5E;
  --hy-ink-500: #566879;
  --hy-ink-400: #8796A5;
  --hy-slate-300: #B7C4D0;
  --hy-line-200: #D9E2EA;
  --hy-line-100: #EBF0F4;
  --hy-white: #FFFFFF;
  --hy-surface-50: #F6F9FB;
  --hy-green-600: #1E7B4F;
  --hy-green-50: #E8F5EE;
  --hy-amber-700: #8F5400;
  --hy-amber-50: #FFF4E0;
  --hy-red-600: #C0392B;
  --hy-red-50: #FCEDEB;
  --hy-text-heading: #0E2A47;
  --hy-text-body: #344A5E;
  --hy-text-muted: #566879;
  --hy-text-disabled: #8796A5;
  --hy-text-on-primary: #FFFFFF;
  --hy-text-link: #0B6E99;
  --hy-bg-canvas: #FFFFFF;
  --hy-bg-subtle: #F6F9FB;
  --hy-bg-selected: #EEF6FA;
  --hy-bg-selected-strong: #D5E9F3;
  --hy-bg-track: #EBF0F4;
  --hy-action-primary: #0B6E99;
  --hy-action-primary-hover: #08577A;
  --hy-action-primary-pressed: #0A4561;
  --hy-action-secondary: #EEF6FA;
  --hy-border-default: #D9E2EA;
  --hy-border-subtle: #EBF0F4;
  --hy-border-strong: #A9D2E6;
  --hy-focus-ring: #1A86B8;
  --hy-status-success: #1E7B4F;
  --hy-status-success-bg: #E8F5EE;
  --hy-status-warning: #8F5400;
  --hy-status-warning-bg: #FFF4E0;
  --hy-status-danger: #C0392B;
  --hy-status-danger-bg: #FCEDEB;
  --hy-chart-primary: #0B6E99;
  --hy-chart-secondary: #6FB3D3;
  --hy-chart-tertiary: #1B3A5C;
  --hy-chart-mood-good: #0B6E99;
  --hy-chart-mood-neutral: #B7C4D0;
  --hy-chart-mood-bad: #C0392B;
  --hy-chart-missing: #8796A5;
  --hy-space-2: 2px;
  --hy-space-4: 4px;
  --hy-space-8: 8px;
  --hy-space-12: 12px;
  --hy-space-16: 16px;
  --hy-space-20: 20px;
  --hy-space-24: 24px;
  --hy-space-32: 32px;
  --hy-space-40: 40px;
  --hy-space-56: 56px;
  --hy-space-72: 72px;
  --hy-radius-xs: 4px;
  --hy-radius-sm: 6px;
  --hy-radius-md: 10px;
  --hy-radius-lg: 16px;
  --hy-radius-pill: 999px;
  --hy-font-size-xs: 12px;
  --hy-font-size-sm: 13px;
  --hy-font-size-md: 14px;
  --hy-font-size-lg: 16px;
  --hy-font-size-xl: 18px;
  --hy-font-size-2xl: 22px;
  --hy-font-size-3xl: 28px;
  --hy-font-size-num: 36px;
  --hy-motion-duration-press: 120ms;
  --hy-motion-duration-fast: 160ms;
  --hy-motion-duration-base: 200ms;
  --hy-motion-duration-slow: 240ms;
  --hy-motion-duration-page: 300ms;
  --hy-motion-duration-chart: 720ms;
  --hy-motion-duration-count: 800ms;
  --hy-motion-easing-out: cubic-bezier(0.2, 0, 0, 1);
  --hy-motion-easing-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --hy-motion-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --hy-motion-stagger-chart: 80ms;
  --hy-font-family-base: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic UI', system-ui, sans-serif;
  --hy-font-family-num: 'Inter', 'Noto Sans JP', system-ui, sans-serif;
  --hy-font-numeric: tabular-nums;
  --hy-line-height-body: 1.7;
  --hy-line-height-heading: 1.35;
  --hy-shadow-raised: 0 1px 2px rgba(14,42,71,.06), 0 4px 12px rgba(14,42,71,.06);
  --hy-shadow-overlay: 0 16px 40px -8px rgba(14,42,71,.16);
  --hy-focus-ring-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px #1A86B8;
}

/* reduced motion: 移動系は 0ms、フェードは 120ms 以下 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hy-motion-duration-press: 0ms;
    --hy-motion-duration-fast: 0ms;
    --hy-motion-duration-base: 120ms;
    --hy-motion-duration-slow: 120ms;
    --hy-motion-duration-page: 120ms;
    --hy-motion-duration-chart: 0ms;
    --hy-motion-duration-count: 0ms;
    --hy-motion-stagger-chart: 0ms;
  }
}

/* 基本のベース指定（参考） */
html { font-family: var(--hy-font-family-base); color: var(--hy-text-body); background: var(--hy-bg-subtle); }
.hy-num, [data-num] { font-family: var(--hy-font-family-num); font-variant-numeric: var(--hy-font-numeric); }
:focus-visible { outline: none; box-shadow: var(--hy-focus-ring-shadow); border-radius: var(--hy-radius-sm); }