/**
 * Microsoft Fluent 2 Design System - Core Theme CSS
 * Zero-runtime CSS Custom Properties (Light, Dark, High Contrast)
 */

:root,
[data-theme="light"] {
  /* Color - Neutral Palette */
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralBackground4: #f0f0f0;
  --colorNeutralBackground5: #ebebeb;
  --colorNeutralBackground6: #e6e6e6;
  --colorNeutralBackgroundDisabled: #f0f0f0;

  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground3: #616161;
  --colorNeutralForeground4: #707070;
  --colorNeutralForegroundDisabled: #bdbdbd;
  --colorNeutralForegroundInverted: #ffffff;

  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke2: #e0e0e0;
  --colorNeutralStroke3: #f0f0f0;
  --colorNeutralStrokeDisabled: #e0e0e0;
  --colorStrokeFocus2: #000000;

  /* Color - Brand Palette (Default: Microsoft Communication Blue) */
  --colorBrandBackground: #0078d4;
  --colorBrandBackgroundHover: #106ebe;
  --colorBrandBackgroundPressed: #005a9e;
  --colorBrandBackgroundSelected: #004578;
  --colorBrandForeground1: #0078d4;
  --colorBrandForeground2: #106ebe;
  --colorBrandForegroundInverted: #ffffff;
  --colorBrandStroke1: #0078d4;
  --colorBrandStroke2: #106ebe;

  /* Color - Semantic Status Palette */
  --colorStatusDangerBackground: #fdf3f4;
  --colorStatusDangerForeground: #d13438;
  --colorStatusDangerBorder: #f1707b;

  --colorStatusWarningBackground: #fff9f5;
  --colorStatusWarningForeground: #794500;
  --colorStatusWarningBorder: #ffaa44;

  --colorStatusSuccessBackground: #f1faf1;
  --colorStatusSuccessForeground: #107c41;
  --colorStatusSuccessBorder: #54b054;

  --colorStatusInfoBackground: #f0f6fc;
  --colorStatusInfoForeground: #0078d4;
  --colorStatusInfoBorder: #6cb8f6;

  /* Elevation & Shadows (Key + Ambient Dual Ramp) */
  --shadow2: 0 0 2px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.14);
  --shadow4: 0 0 2px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.14);
  --shadow8: 0 0 2px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.14);
  --shadow16: 0 0 2px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.14);
  --shadow28: 0 0 8px rgba(0, 0, 0, 0.20), 0 14px 28px rgba(0, 0, 0, 0.24);
  --shadow64: 0 0 8px rgba(0, 0, 0, 0.20), 0 32px 64px rgba(0, 0, 0, 0.24);

  /* Spacing Ramp (4px Base) */
  --spacingHorizontalNone: 0px;
  --spacingHorizontalXXS: 2px;
  --spacingHorizontalXS: 4px;
  --spacingHorizontalS: 6px;
  --spacingHorizontalSNudge: 8px;
  --spacingHorizontalM: 10px;
  --spacingHorizontalMNudge: 12px;
  --spacingHorizontalL: 16px;
  --spacingHorizontalXL: 20px;
  --spacingHorizontalXXL: 24px;
  --spacingHorizontalXXXL: 32px;

  --spacingVerticalNone: 0px;
  --spacingVerticalXXS: 2px;
  --spacingVerticalXS: 4px;
  --spacingVerticalS: 6px;
  --spacingVerticalSNudge: 8px;
  --spacingVerticalM: 10px;
  --spacingVerticalMNudge: 12px;
  --spacingVerticalL: 16px;
  --spacingVerticalXL: 20px;
  --spacingVerticalXXL: 24px;
  --spacingVerticalXXXL: 32px;

  /* Corner Radii */
  --borderRadiusNone: 0px;
  --borderRadiusSmall: 2px;
  --borderRadiusMedium: 4px;
  --borderRadiusLarge: 8px;
  --borderRadiusXLarge: 12px;
  --borderRadiusCircular: 9999px;

  /* Stroke Thickness */
  --strokeWidthThin: 1px;
  --strokeWidthThick: 2px;
  --strokeWidthThicker: 3px;
  --strokeWidthThickest: 4px;

  /* Typography Stacks */
  --fontFamilyBase: "Segoe UI", -apple-system, BlinkMacSystemFont, "Roboto", "Helvetica Neue", sans-serif;
  --fontFamilyMonospace: "Consolas", "Cascadia Code", "Courier New", monospace;

  /* Typography Ramp */
  --fontSizeCaption2: 10px;
  --lineHeightCaption2: 14px;

  --fontSizeCaption1: 12px;
  --lineHeightCaption1: 16px;

  --fontSizeBody1: 14px;
  --lineHeightBody1: 20px;

  --fontSizeSubtitle2: 16px;
  --lineHeightSubtitle2: 22px;

  --fontSizeSubtitle1: 20px;
  --lineHeightSubtitle1: 26px;

  --fontSizeTitle3: 24px;
  --lineHeightTitle3: 32px;

  --fontSizeTitle2: 28px;
  --lineHeightTitle2: 36px;

  --fontSizeTitle1: 32px;
  --lineHeightTitle1: 40px;

  --fontSizeLargeTitle: 40px;
  --lineHeightLargeTitle: 52px;

  --fontSizeDisplay: 68px;
  --lineHeightDisplay: 92px;

  --fontWeightRegular: 400;
  --fontWeightMedium: 500;
  --fontWeightSemibold: 600;
  --fontWeightBold: 700;

  /* Motion & Animations */
  --durationUltraFast: 50ms;
  --durationFaster: 100ms;
  --durationFast: 150ms;
  --durationNormal: 200ms;
  --durationGentle: 300ms;
  --durationSlow: 400ms;
  --durationSlower: 500ms;

  --curveLinear: cubic-bezier(0, 0, 1, 1);
  --curveDecelerateMax: cubic-bezier(0, 0, 0, 1);
  --curveAccelerateMax: cubic-bezier(1, 0, 1, 1);
  --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1);
}

/* Dark Mode Theme */
[data-theme="dark"] {
  --colorNeutralBackground1: #292929;
  --colorNeutralBackground2: #1f1f1f;
  --colorNeutralBackground3: #141414;
  --colorNeutralBackground4: #0f0f0f;
  --colorNeutralBackground5: #0a0a0a;
  --colorNeutralBackground6: #000000;
  --colorNeutralBackgroundDisabled: #1f1f1f;

  --colorNeutralForeground1: #ffffff;
  --colorNeutralForeground2: #d6d6d6;
  --colorNeutralForeground3: #adadad;
  --colorNeutralForeground4: #858585;
  --colorNeutralForegroundDisabled: #5c5c5c;
  --colorNeutralForegroundInverted: #242424;

  --colorNeutralStroke1: #666666;
  --colorNeutralStroke2: #525252;
  --colorNeutralStroke3: #3d3d3d;
  --colorNeutralStrokeDisabled: #3d3d3d;
  --colorStrokeFocus2: #ffffff;

  --colorBrandBackground: #118fe6;
  --colorBrandBackgroundHover: #1a9df2;
  --colorBrandBackgroundPressed: #0f78bd;
  --colorBrandBackgroundSelected: #0a5f97;
  --colorBrandForeground1: #47a8f5;
  --colorBrandForeground2: #70bcf7;
  --colorBrandForegroundInverted: #000000;
  --colorBrandStroke1: #118fe6;
  --colorBrandStroke2: #47a8f5;

  --colorStatusDangerBackground: #3f1011;
  --colorStatusDangerForeground: #f1707b;
  --colorStatusDangerBorder: #d13438;

  --colorStatusWarningBackground: #432b05;
  --colorStatusWarningForeground: #ffc37a;
  --colorStatusWarningBorder: #d48200;

  --colorStatusSuccessBackground: #0e371a;
  --colorStatusSuccessForeground: #54b054;
  --colorStatusSuccessBorder: #107c41;

  --colorStatusInfoBackground: #00284d;
  --colorStatusInfoForeground: #6cb8f6;
  --colorStatusInfoBorder: #0078d4;

  --shadow2: 0 0 2px rgba(0, 0, 0, 0.24), 0 1px 2px rgba(0, 0, 0, 0.28);
  --shadow4: 0 0 2px rgba(0, 0, 0, 0.24), 0 2px 4px rgba(0, 0, 0, 0.28);
  --shadow8: 0 0 2px rgba(0, 0, 0, 0.24), 0 4px 8px rgba(0, 0, 0, 0.28);
  --shadow16: 0 0 2px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.28);
  --shadow28: 0 0 2px rgba(0, 0, 0, 0.20), 0 14px 28px rgba(0, 0, 0, 0.28);
  --shadow64: 0 0 2px rgba(0, 0, 0, 0.20), 0 32px 64px rgba(0, 0, 0, 0.28);
}

/* High Contrast / Forced Colors Mode */
@media (forced-colors: active) {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --colorNeutralBackground1: Canvas;
    --colorNeutralBackground2: Canvas;
    --colorNeutralBackground3: Canvas;
    --colorNeutralForeground1: CanvasText;
    --colorNeutralForeground2: CanvasText;
    --colorNeutralForeground3: CanvasText;
    --colorNeutralForegroundDisabled: GrayText;
    --colorNeutralStroke1: CanvasText;
    --colorNeutralStroke2: CanvasText;
    --colorStrokeFocus2: Highlight;
    --colorBrandBackground: Highlight;
    --colorBrandForeground1: Highlight;
    --colorBrandForegroundInverted: HighlightText;
  }
}