/* ==========================================================================
   Design Tokens — Single Source of Truth
   Version: 0.2.9 (foundations.md baseline 0.2.0 palette, Spec 001 runtime)
   Authority: docs/design/foundations.md, docs/design/CHANGELOG.md 0.2.7
   Runtime: --color-{name}-rgb channels + --{name} aliases
   ========================================================================== */

:root,
[data-theme="light"] {

  /* ===== Typography families ===== */
  --font-primary: "IBM Plex Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --font-sans: var(--font-primary);
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ===== Type scale (size) ===== */
  --text-display: 1.75rem;
  --text-h1: 1.5rem;
  --text-h2: 1.25rem;
  --text-h3: 1rem;
  --text-body: 0.875rem;
  --text-body-lg: 1rem;
  --text-label: 0.8125rem;
  --text-caption: 0.75rem;
  --text-code: 0.8125rem;

  /* ===== Line-height ===== */
  --leading-display: 1.35;
  --leading-h1: 1.4;
  --leading-h2: 1.4;
  --leading-h3: 1.5;
  --leading-body: 1.7;
  --leading-body-lg: 1.7;
  --leading-label: 1.4;
  --leading-caption: 1.4;
  --leading-code: 1.5;

  /* ===== Weight ===== */
  --weight-display: 700;
  --weight-h1: 700;
  --weight-h2: 700;
  --weight-h3: 500;
  --weight-body: 400;
  --weight-body-lg: 400;
  --weight-label: 500;
  --weight-caption: 400;
  --weight-code: 400;

  --tracking-normal: 0;
  --measure-readable: 40em;

  /* ===== Spacing (4px base). space-0.5 is CSS-safe space-0-5 only ===== */
  --space-0: 0;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ===== Radius ===== */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ===== Border widths ===== */
  --border-width-default: 1px;
  --border-focus: 2px;

  /* ===== Z-index ===== */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ===== Layout ===== */
  --content-narrow: 40rem;
  --content-default: 72rem;
  --content-wide: 90rem;
  --gutter: 16px;

  /* ===== Icon sizes ===== */
  --icon-sm: 1rem;
  --icon-md: 1.25rem;
  --icon-lg: 1.5rem;

  /* ===== Motion ===== */
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-exit: cubic-bezier(0.3, 0, 1, 1);
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);


  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.06);
  --elevation-2: 0 4px 12px rgba(0, 0, 0, 0.08);
  --elevation-3: 0 8px 24px rgba(0, 0, 0, 0.12);

  --color-surface-default-rgb: 247 249 251;
  --surface-default: rgb(var(--color-surface-default-rgb));
  --color-surface-muted-rgb: 240 244 247;
  --surface-muted: rgb(var(--color-surface-muted-rgb));
  --color-surface-raised-rgb: 255 255 255;
  --surface-raised: rgb(var(--color-surface-raised-rgb));
  --color-surface-header-rgb: 255 255 255;
  --surface-header: rgb(var(--color-surface-header-rgb));
  --color-surface-sidebar-rgb: 255 255 255;
  --surface-sidebar: rgb(var(--color-surface-sidebar-rgb));
  --color-surface-elevated-rgb: 255 255 255;
  --surface-elevated: rgb(var(--color-surface-elevated-rgb));
  --color-surface-hover-rgb: 239 247 251;
  --surface-hover: rgb(var(--color-surface-hover-rgb));
  --color-surface-selected-rgb: 227 241 249;
  --surface-selected: rgb(var(--color-surface-selected-rgb));
  --color-surface-table-header-rgb: 248 250 252;
  --surface-table-header: rgb(var(--color-surface-table-header-rgb));
  --color-surface-table-hover-rgb: 239 247 251;
  --surface-table-hover: rgb(var(--color-surface-table-hover-rgb));
  --color-surface-table-selected-rgb: 227 241 249;
  --surface-table-selected: rgb(var(--color-surface-table-selected-rgb));
  --color-surface-table-zebra-rgb: 252 253 254;
  --surface-table-zebra: rgb(var(--color-surface-table-zebra-rgb));
  --color-brand-primary-rgb: 87 160 197;
  --brand-primary: rgb(var(--color-brand-primary-rgb));
  --color-brand-secondary-rgb: 76 129 186;
  --brand-secondary: rgb(var(--color-brand-secondary-rgb));
  --color-brand-soft-rgb: 227 241 249;
  --brand-soft: rgb(var(--color-brand-soft-rgb));
  --color-action-primary-rgb: 87 160 197;
  --action-primary: rgb(var(--color-action-primary-rgb));
  --color-action-primary-hover-rgb: 76 143 177;
  --action-primary-hover: rgb(var(--color-action-primary-hover-rgb));
  --color-action-primary-active-rgb: 66 128 157;
  --action-primary-active: rgb(var(--color-action-primary-active-rgb));
  --color-action-primary-foreground-rgb: 255 255 255;
  --action-primary-foreground: rgb(var(--color-action-primary-foreground-rgb));
  --color-action-primary-disabled-rgb: 189 210 223;
  --action-primary-disabled: rgb(var(--color-action-primary-disabled-rgb));
  --color-action-primary-disabled-foreground-rgb: 104 118 128;
  --action-primary-disabled-foreground: rgb(var(--color-action-primary-disabled-foreground-rgb));
  --color-action-danger-rgb: 196 60 64;
  --action-danger: rgb(var(--color-action-danger-rgb));
  --color-action-danger-hover-rgb: 172 48 53;
  --action-danger-hover: rgb(var(--color-action-danger-hover-rgb));
  --color-action-danger-active-rgb: 146 39 44;
  --action-danger-active: rgb(var(--color-action-danger-active-rgb));
  --color-action-danger-foreground-rgb: 255 255 255;
  --action-danger-foreground: rgb(var(--color-action-danger-foreground-rgb));
  --color-text-primary-rgb: 30 42 47;
  --text-primary: rgb(var(--color-text-primary-rgb));
  --color-text-secondary-rgb: 86 98 107;
  --text-secondary: rgb(var(--color-text-secondary-rgb));
  --color-text-muted-rgb: 104 118 128;
  --text-muted: rgb(var(--color-text-muted-rgb));
  --color-text-disabled-rgb: 154 165 174;
  --text-disabled: rgb(var(--color-text-disabled-rgb));
  --color-text-inverse-rgb: 255 255 255;
  --text-inverse: rgb(var(--color-text-inverse-rgb));
  --color-text-link-rgb: 87 160 197;
  --text-link: rgb(var(--color-text-link-rgb));
  --color-border-default-rgb: 226 232 236;
  --border-default: rgb(var(--color-border-default-rgb));
  --color-border-control-rgb: 132 148 159;
  --border-control: rgb(var(--color-border-control-rgb));
  --color-border-hover-rgb: 104 118 128;
  --border-hover: rgb(var(--color-border-hover-rgb));
  --color-border-selected-rgb: 87 160 197;
  --border-selected: rgb(var(--color-border-selected-rgb));
  --color-focus-ring-rgb: 87 160 197;
  --focus-ring: rgb(var(--color-focus-ring-rgb));
  --color-focus-ring-offset-rgb: 255 255 255;
  --focus-ring-offset: rgb(var(--color-focus-ring-offset-rgb));
  --color-status-success-surface-rgb: 232 246 238;
  --status-success-surface: rgb(var(--color-status-success-surface-rgb));
  --color-status-success-text-rgb: 23 107 67;
  --status-success-text: rgb(var(--color-status-success-text-rgb));
  --color-status-success-border-rgb: 46 158 101;
  --status-success-border: rgb(var(--color-status-success-border-rgb));
  --color-status-warning-surface-rgb: 255 244 222;
  --status-warning-surface: rgb(var(--color-status-warning-surface-rgb));
  --color-status-warning-text-rgb: 122 75 0;
  --status-warning-text: rgb(var(--color-status-warning-text-rgb));
  --color-status-warning-border-rgb: 185 120 8;
  --status-warning-border: rgb(var(--color-status-warning-border-rgb));
  --color-status-error-surface-rgb: 253 236 236;
  --status-error-surface: rgb(var(--color-status-error-surface-rgb));
  --color-status-error-text-rgb: 165 47 53;
  --status-error-text: rgb(var(--color-status-error-text-rgb));
  --color-status-error-border-rgb: 217 74 74;
  --status-error-border: rgb(var(--color-status-error-border-rgb));
  --color-status-info-surface-rgb: 232 246 251;
  --status-info-surface: rgb(var(--color-status-info-surface-rgb));
  --color-status-info-text-rgb: 23 98 123;
  --status-info-text: rgb(var(--color-status-info-text-rgb));
  --color-status-info-border-rgb: 38 120 146;
  --status-info-border: rgb(var(--color-status-info-border-rgb));
  --color-chart-1-rgb: 38 120 146;
  --chart-1: rgb(var(--color-chart-1-rgb));
  --color-chart-2-rgb: 76 111 175;
  --chart-2: rgb(var(--color-chart-2-rgb));
  --color-chart-3-rgb: 46 139 98;
  --chart-3: rgb(var(--color-chart-3-rgb));
  --color-chart-4-rgb: 185 120 8;
  --chart-4: rgb(var(--color-chart-4-rgb));
  --color-chart-5-rgb: 199 91 67;
  --chart-5: rgb(var(--color-chart-5-rgb));
  --color-chart-6-rgb: 116 97 184;
  --chart-6: rgb(var(--color-chart-6-rgb));
  --color-chart-7-rgb: 36 127 120;
  --chart-7: rgb(var(--color-chart-7-rgb));
  --color-chart-8-rgb: 182 83 136;
  --chart-8: rgb(var(--color-chart-8-rgb));
  --color-favorite-color-rgb: 239 68 68;
  --favorite-color: rgb(var(--color-favorite-color-rgb));
  --color-favorite-color-hover-rgb: 220 38 38;
  --favorite-color-hover: rgb(var(--color-favorite-color-hover-rgb));
  --color-scrollbar-thumb-rgb: 203 213 225;
  --scrollbar-thumb: rgb(var(--color-scrollbar-thumb-rgb));
  --color-scrollbar-track-rgb: 241 245 249;
  --scrollbar-track: rgb(var(--color-scrollbar-track-rgb));
  --color-overlay-rgb: 0 0 0;
  --overlay-opacity: 0.45;
  --overlay: rgb(var(--color-overlay-rgb) / var(--overlay-opacity));

}

[data-theme="dark"] {

  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --elevation-2: 0 4px 12px rgba(0, 0, 0, 0.4);
  --elevation-3: 0 8px 24px rgba(0, 0, 0, 0.5);

  --color-surface-default-rgb: 15 23 32;
  --surface-default: rgb(var(--color-surface-default-rgb));
  --color-surface-muted-rgb: 19 30 41;
  --surface-muted: rgb(var(--color-surface-muted-rgb));
  --color-surface-raised-rgb: 27 42 54;
  --surface-raised: rgb(var(--color-surface-raised-rgb));
  --color-surface-header-rgb: 24 36 49;
  --surface-header: rgb(var(--color-surface-header-rgb));
  --color-surface-sidebar-rgb: 19 30 41;
  --surface-sidebar: rgb(var(--color-surface-sidebar-rgb));
  --color-surface-elevated-rgb: 34 53 67;
  --surface-elevated: rgb(var(--color-surface-elevated-rgb));
  --color-surface-hover-rgb: 37 55 69;
  --surface-hover: rgb(var(--color-surface-hover-rgb));
  --color-surface-selected-rgb: 27 48 60;
  --surface-selected: rgb(var(--color-surface-selected-rgb));
  --color-surface-table-header-rgb: 24 38 51;
  --surface-table-header: rgb(var(--color-surface-table-header-rgb));
  --color-surface-table-hover-rgb: 32 51 64;
  --surface-table-hover: rgb(var(--color-surface-table-hover-rgb));
  --color-surface-table-selected-rgb: 27 48 60;
  --surface-table-selected: rgb(var(--color-surface-table-selected-rgb));
  --color-surface-table-zebra-rgb: 22 35 46;
  --surface-table-zebra: rgb(var(--color-surface-table-zebra-rgb));
  --color-brand-primary-rgb: 87 160 197;
  --brand-primary: rgb(var(--color-brand-primary-rgb));
  --color-brand-secondary-rgb: 76 129 186;
  --brand-secondary: rgb(var(--color-brand-secondary-rgb));
  --color-brand-soft-rgb: 27 48 60;
  --brand-soft: rgb(var(--color-brand-soft-rgb));
  --color-action-primary-rgb: 87 160 197;
  --action-primary: rgb(var(--color-action-primary-rgb));
  --color-action-primary-hover-rgb: 101 176 213;
  --action-primary-hover: rgb(var(--color-action-primary-hover-rgb));
  --color-action-primary-active-rgb: 115 192 229;
  --action-primary-active: rgb(var(--color-action-primary-active-rgb));
  --color-action-primary-foreground-rgb: 255 255 255;
  --action-primary-foreground: rgb(var(--color-action-primary-foreground-rgb));
  --color-action-primary-disabled-rgb: 52 78 92;
  --action-primary-disabled: rgb(var(--color-action-primary-disabled-rgb));
  --color-action-primary-disabled-foreground-rgb: 86 98 107;
  --action-primary-disabled-foreground: rgb(var(--color-action-primary-disabled-foreground-rgb));
  --color-action-danger-rgb: 201 75 80;
  --action-danger: rgb(var(--color-action-danger-rgb));
  --color-action-danger-hover-rgb: 216 91 96;
  --action-danger-hover: rgb(var(--color-action-danger-hover-rgb));
  --color-action-danger-active-rgb: 184 64 69;
  --action-danger-active: rgb(var(--color-action-danger-active-rgb));
  --color-action-danger-foreground-rgb: 255 255 255;
  --action-danger-foreground: rgb(var(--color-action-danger-foreground-rgb));
  --color-text-primary-rgb: 244 248 250;
  --text-primary: rgb(var(--color-text-primary-rgb));
  --color-text-secondary-rgb: 195 209 216;
  --text-secondary: rgb(var(--color-text-secondary-rgb));
  --color-text-muted-rgb: 147 165 175;
  --text-muted: rgb(var(--color-text-muted-rgb));
  --color-text-disabled-rgb: 115 131 143;
  --text-disabled: rgb(var(--color-text-disabled-rgb));
  --color-text-inverse-rgb: 255 255 255;
  --text-inverse: rgb(var(--color-text-inverse-rgb));
  --color-text-link-rgb: 87 160 197;
  --text-link: rgb(var(--color-text-link-rgb));
  --color-border-default-rgb: 43 59 72;
  --border-default: rgb(var(--color-border-default-rgb));
  --color-border-control-rgb: 96 121 137;
  --border-control: rgb(var(--color-border-control-rgb));
  --color-border-hover-rgb: 120 145 161;
  --border-hover: rgb(var(--color-border-hover-rgb));
  --color-border-selected-rgb: 87 160 197;
  --border-selected: rgb(var(--color-border-selected-rgb));
  --color-focus-ring-rgb: 87 160 197;
  --focus-ring: rgb(var(--color-focus-ring-rgb));
  --color-focus-ring-offset-rgb: 15 23 32;
  --focus-ring-offset: rgb(var(--color-focus-ring-offset-rgb));
  --color-status-success-surface-rgb: 23 58 43;
  --status-success-surface: rgb(var(--color-status-success-surface-rgb));
  --color-status-success-text-rgb: 113 212 155;
  --status-success-text: rgb(var(--color-status-success-text-rgb));
  --color-status-success-border-rgb: 70 194 122;
  --status-success-border: rgb(var(--color-status-success-border-rgb));
  --color-status-warning-surface-rgb: 70 52 20;
  --status-warning-surface: rgb(var(--color-status-warning-surface-rgb));
  --color-status-warning-text-rgb: 255 208 113;
  --status-warning-text: rgb(var(--color-status-warning-text-rgb));
  --color-status-warning-border-rgb: 240 185 76;
  --status-warning-border: rgb(var(--color-status-warning-border-rgb));
  --color-status-error-surface-rgb: 72 35 38;
  --status-error-surface: rgb(var(--color-status-error-surface-rgb));
  --color-status-error-text-rgb: 255 150 150;
  --status-error-text: rgb(var(--color-status-error-text-rgb));
  --color-status-error-border-rgb: 242 107 107;
  --status-error-border: rgb(var(--color-status-error-border-rgb));
  --color-status-info-surface-rgb: 22 55 67;
  --status-info-surface: rgb(var(--color-status-info-surface-rgb));
  --color-status-info-text-rgb: 140 220 241;
  --status-info-text: rgb(var(--color-status-info-text-rgb));
  --color-status-info-border-rgb: 108 199 229;
  --status-info-border: rgb(var(--color-status-info-border-rgb));
  --color-chart-1-rgb: 108 199 229;
  --chart-1: rgb(var(--color-chart-1-rgb));
  --color-chart-2-rgb: 120 167 217;
  --chart-2: rgb(var(--color-chart-2-rgb));
  --color-chart-3-rgb: 113 212 155;
  --chart-3: rgb(var(--color-chart-3-rgb));
  --color-chart-4-rgb: 240 185 76;
  --chart-4: rgb(var(--color-chart-4-rgb));
  --color-chart-5-rgb: 240 139 115;
  --chart-5: rgb(var(--color-chart-5-rgb));
  --color-chart-6-rgb: 169 150 234;
  --chart-6: rgb(var(--color-chart-6-rgb));
  --color-chart-7-rgb: 105 210 200;
  --chart-7: rgb(var(--color-chart-7-rgb));
  --color-chart-8-rgb: 225 132 183;
  --chart-8: rgb(var(--color-chart-8-rgb));
  --color-favorite-color-rgb: 239 68 68;
  --favorite-color: rgb(var(--color-favorite-color-rgb));
  --color-favorite-color-hover-rgb: 220 38 38;
  --favorite-color-hover: rgb(var(--color-favorite-color-hover-rgb));
  --color-scrollbar-thumb-rgb: 96 121 137;
  --scrollbar-thumb: rgb(var(--color-scrollbar-thumb-rgb));
  --color-scrollbar-track-rgb: 19 30 41;
  --scrollbar-track: rgb(var(--color-scrollbar-track-rgb));
  --color-overlay-rgb: 0 0 0;
  --overlay-opacity: 0.55;
  --overlay: rgb(var(--color-overlay-rgb) / var(--overlay-opacity));

}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
  }
}

html[data-theme="dark"] body {
  background-color: var(--surface-default);
  color: var(--text-primary);
}