/* デザイントークン(意味づけレイヤー)。
   実際の値は Microsoft 公式 @fluentui/tokens から生成した fluent-tokens.css の
   --fluent-* 変数を参照している(scripts/generate-fluent-tokens.js で再生成可能)。
   ここでは「どの実体をどの用途に使うか」だけを決める。 */
:root {
  color-scheme: light;

  --color-bg: var(--fluent-color-neutral-background-2);
  --color-bg-elevated: var(--fluent-color-neutral-background-1);
  --color-bg-subtle: var(--fluent-color-neutral-background-3);
  --color-bg-brand-subtle: #EBF3FC;
  --color-text: var(--fluent-color-neutral-foreground-1);
  --color-text-secondary: var(--fluent-color-neutral-foreground-2);
  --color-text-tertiary: var(--fluent-color-neutral-foreground-3);
  --color-border: var(--fluent-color-neutral-stroke-2);
  --color-border-strong: var(--fluent-color-neutral-stroke-1);

  --color-brand: var(--fluent-color-brand-background);
  --color-brand-hover: var(--fluent-color-brand-background-hover);
  --color-brand-pressed: var(--fluent-color-brand-background-pressed);
  --color-on-brand: #FFFFFF;

  --color-basic: var(--fluent-color-palette-green-foreground-1);
  --color-basic-bg: #E9F7E9;
  --color-standard: var(--fluent-color-palette-dark-orange-foreground-1);
  --color-standard-bg: #FDF0E7;
  --color-advanced: var(--fluent-color-palette-red-foreground-1);
  --color-advanced-bg: #FCE9EC;

  --color-warning-bg: #FFF9E6;
  --color-warning-border: var(--fluent-color-palette-yellow-border-2);
  --color-pending-bg: var(--fluent-color-neutral-background-3);

  --shadow-2: var(--fluent-shadow-2);
  --shadow-4: var(--fluent-shadow-4);
  --shadow-8: var(--fluent-shadow-8);
  --shadow-16: var(--fluent-shadow-16);

  /* 角丸(Fluent 2 の実測値そのまま。装飾ではなく最小限の識別用途にとどめる) */
  --radius-sm: var(--fluent-border-radius-medium);   /* 4px: ボタン・バッジ・ナビ */
  --radius-md: var(--fluent-border-radius-xlarge);   /* 8px: カード・callout */
  --radius-lg: var(--fluent-border-radius-2xlarge);  /* 12px: 大きい面 */
  --radius-pill: var(--fluent-border-radius-circular);

  --font-sans: "Yu Gothic UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", var(--fluent-font-family-base);
  --font-mono: var(--fluent-font-family-monospace);
  --font-size-base: 16px;
  --line-height-body: 1.75;
  --line-height-heading: 1.4;

  --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;

  --content-max-width: 760px;
  --sidebar-width: 280px;
  --header-height: 56px;

  --transition-fast: 100ms ease;
  --transition-base: 150ms ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --color-bg-brand-subtle: #113A5C;
    --color-basic-bg: #16321A;
    --color-standard-bg: #3A2712;
    --color-advanced-bg: #3A1720;
    --color-warning-bg: #3A340F;
  }
}