/* 自動生成ファイル。手で編集しないこと。
   node scripts/generate-fluent-tokens.js で @fluentui/tokens (Microsoft公式Fluent 2トークン) から再生成される。 */
:root {
  --fluent-color-neutral-background-1: #ffffff;
  --fluent-color-neutral-background-2: #fafafa;
  --fluent-color-neutral-background-3: #f5f5f5;
  --fluent-color-neutral-foreground-1: #242424;
  --fluent-color-neutral-foreground-2: #424242;
  --fluent-color-neutral-foreground-3: #616161;
  --fluent-color-neutral-stroke-1: #d1d1d1;
  --fluent-color-neutral-stroke-2: #e0e0e0;
  --fluent-color-brand-background: #0f6cbd;
  --fluent-color-brand-background-hover: #115ea3;
  --fluent-color-brand-background-pressed: #0c3b5e;
  --fluent-color-brand-foreground-1: #0f6cbd;
  --fluent-color-brand-foreground-link: #115ea3;
  --fluent-color-palette-red-foreground-1: #bc2f32;
  --fluent-color-palette-red-background-2: #f1bbbc;
  --fluent-color-palette-green-foreground-1: #0e700e;
  --fluent-color-palette-green-background-2: #9fd89f;
  --fluent-color-palette-dark-orange-foreground-1: #c43501;
  --fluent-color-palette-dark-orange-background-2: #f4bfab;
  --fluent-color-palette-yellow-background-2: #fef7b2;
  --fluent-color-palette-yellow-border-2: #fde300;
  --fluent-shadow-2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
  --fluent-shadow-4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
  --fluent-shadow-8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
  --fluent-shadow-16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
  --fluent-shadow-28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14);
  --fluent-font-family-base: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --fluent-font-family-monospace: Consolas, 'Courier New', Courier, monospace;
  --fluent-font-size-base-200: 12px;
  --fluent-font-size-base-300: 14px;
  --fluent-font-size-base-400: 16px;
  --fluent-font-size-base-500: 20px;
  --fluent-font-size-base-600: 24px;
  --fluent-font-size-hero-700: 28px;
  --fluent-font-size-hero-800: 32px;
  --fluent-font-size-hero-900: 40px;
  --fluent-line-height-base-200: 16px;
  --fluent-line-height-base-300: 20px;
  --fluent-line-height-base-400: 22px;
  --fluent-line-height-base-500: 28px;
  --fluent-line-height-base-600: 32px;
  --fluent-line-height-hero-700: 36px;
  --fluent-line-height-hero-800: 40px;
  --fluent-line-height-hero-900: 52px;
  --fluent-font-weight-regular: 400;
  --fluent-font-weight-medium: 500;
  --fluent-font-weight-semibold: 600;
  --fluent-font-weight-bold: 700;
  --fluent-border-radius-small: 2px;
  --fluent-border-radius-medium: 4px;
  --fluent-border-radius-large: 6px;
  --fluent-border-radius-xlarge: 8px;
  --fluent-border-radius-2xlarge: 12px;
  --fluent-border-radius-circular: 10000px;
}

@media (prefers-color-scheme: dark) {
  :root {
  --fluent-color-neutral-background-1: #292929;
  --fluent-color-neutral-background-2: #1f1f1f;
  --fluent-color-neutral-background-3: #141414;
  --fluent-color-neutral-foreground-1: #ffffff;
  --fluent-color-neutral-foreground-2: #d6d6d6;
  --fluent-color-neutral-foreground-3: #adadad;
  --fluent-color-neutral-stroke-1: #666666;
  --fluent-color-neutral-stroke-2: #525252;
  --fluent-color-brand-background: #115ea3;
  --fluent-color-brand-background-hover: #0f6cbd;
  --fluent-color-brand-background-pressed: #0c3b5e;
  --fluent-color-brand-foreground-1: #479ef5;
  --fluent-color-brand-foreground-link: #479ef5;
  --fluent-color-palette-red-foreground-1: #e37d80;
  --fluent-color-palette-red-background-2: #751d1f;
  --fluent-color-palette-green-foreground-1: #54b054;
  --fluent-color-palette-green-background-2: #094509;
  --fluent-color-palette-dark-orange-foreground-1: #e9835e;
  --fluent-color-palette-dark-orange-background-2: #7a2101;
  --fluent-color-palette-yellow-background-2: #817400;
  --fluent-color-palette-yellow-border-2: #fdea3d;
  --fluent-shadow-2: 0 0 2px rgba(0,0,0,0.24), 0 1px 2px rgba(0,0,0,0.28);
  --fluent-shadow-4: 0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28);
  --fluent-shadow-8: 0 0 2px rgba(0,0,0,0.24), 0 4px 8px rgba(0,0,0,0.28);
  --fluent-shadow-16: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28);
  --fluent-shadow-28: 0 0 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28);
  }
}