/* =============================================================================
   Fluent UI Design System — Color & Type Foundations
   Sourced from microsoft/fluentui v9 (packages/tokens). Use these as the
   single source of truth when designing for Microsoft 365, Outlook, Teams,
   Loop, Copilot, Edge surfaces, and other Fluent-themed product UI.
   ============================================================================= */

/* --------------------------- 1. BRAND RAMPS --------------------------- */
/* Each brand has 16 stops (10–160). Default semantic tokens reference [80]. */

:root {
  /* Web — Microsoft 365 / Outlook / Teams web surfaces (the default brand) */
  --brand-web-10:  #061724;
  --brand-web-20:  #082338;
  --brand-web-30:  #0a2e4a;
  --brand-web-40:  #0c3b5e;
  --brand-web-50:  #0e4775;
  --brand-web-60:  #0f548c;
  --brand-web-70:  #115ea3;
  --brand-web-80:  #0f6cbd; /* primary actions */
  --brand-web-90:  #2886de;
  --brand-web-100: #479ef5;
  --brand-web-110: #62abf5;
  --brand-web-120: #77b7f7;
  --brand-web-130: #96c6fa;
  --brand-web-140: #b4d6fa;
  --brand-web-150: #cfe4fa;
  --brand-web-160: #ebf3fc;

  /* Teams — purple ramp used by Microsoft Teams */
  --brand-teams-80:  #5b5fc7;
  --brand-teams-70:  #4f52b2;
  --brand-teams-90:  #7579eb;
  --brand-teams-160: #e8ebfa;

  /* Office — orange ramp used by Office.com, Word, Outlook signature */
  --brand-office-80:  #d83b01;
  --brand-office-70:  #e06a3f;
  --brand-office-100: #fe7948;
  --brand-office-160: #f9dcd1;
}

/* ----------------------- 2. NEUTRAL GREY SCALE ------------------------ */
/* Grey ramp keyed by lightness % (e.g. --grey-14 = #242424). Fluent v9 cherry-
   picks individual stops for foreground/background/stroke. Listed here in full
   so designers can audit contrast without the alias indirection. */

:root {
  --grey-0:   #000000;
  --grey-2:   #050505;
  --grey-4:   #0a0a0a;
  --grey-6:   #0f0f0f;
  --grey-8:   #141414;
  --grey-10:  #1a1a1a;
  --grey-12:  #1f1f1f;
  --grey-14:  #242424;
  --grey-16:  #292929;
  --grey-18:  #2e2e2e;
  --grey-20:  #333333;
  --grey-22:  #383838;
  --grey-24:  #3d3d3d;
  --grey-26:  #424242;
  --grey-28:  #474747;
  --grey-30:  #4d4d4d;
  --grey-32:  #525252;
  --grey-34:  #575757;
  --grey-36:  #5c5c5c;
  --grey-38:  #616161;
  --grey-40:  #666666;
  --grey-42:  #6b6b6b;
  --grey-44:  #707070;
  --grey-46:  #757575;
  --grey-48:  #7a7a7a;
  --grey-50:  #808080;
  --grey-60:  #999999;
  --grey-70:  #b3b3b3;
  --grey-74:  #bdbdbd;
  --grey-78:  #c7c7c7;
  --grey-82:  #d1d1d1;
  --grey-84:  #d6d6d6;
  --grey-86:  #dbdbdb;
  --grey-88:  #e0e0e0;
  --grey-90:  #e6e6e6;
  --grey-92:  #ebebeb;
  --grey-94:  #f0f0f0;
  --grey-96:  #f5f5f5;
  --grey-98:  #fafafa;
  --grey-99:  #fcfcfc;
  --grey-100: #ffffff;

  --white:    #ffffff;
  --black:    #000000;

  --black-alpha-5:  rgba(0,0,0,0.05);
  --black-alpha-10: rgba(0,0,0,0.1);
  --black-alpha-20: rgba(0,0,0,0.2);
  --black-alpha-30: rgba(0,0,0,0.3);
  --black-alpha-40: rgba(0,0,0,0.4);
  --black-alpha-50: rgba(0,0,0,0.5);
  --white-alpha-10: rgba(255,255,255,0.1);
  --white-alpha-20: rgba(255,255,255,0.2);
  --white-alpha-40: rgba(255,255,255,0.4);
  --white-alpha-50: rgba(255,255,255,0.5);
  --white-alpha-70: rgba(255,255,255,0.7);
  --white-alpha-80: rgba(255,255,255,0.8);
}

/* ----------------- 3. SEMANTIC ALIAS TOKENS (LIGHT) ------------------- */
/* Mirror of @fluentui/react-theme webLightTheme — these are what every
   component references. Always prefer the alias over the raw grey. */

:root {
  /* Foreground */
  --colorNeutralForeground1:          var(--grey-14);
  --colorNeutralForeground1Hover:     var(--grey-14);
  --colorNeutralForeground1Pressed:   var(--grey-14);
  --colorNeutralForeground2:          var(--grey-26);
  --colorNeutralForeground2Hover:     var(--grey-14);
  --colorNeutralForeground3:          var(--grey-38);
  --colorNeutralForeground4:          var(--grey-44);
  --colorNeutralForegroundDisabled:   var(--grey-74);
  --colorNeutralForegroundOnBrand:    var(--white);
  --colorNeutralForegroundInverted:   var(--white);

  /* Brand foreground (links, primary text) */
  --colorBrandForeground1:        var(--brand-web-80);
  --colorBrandForeground2:        var(--brand-web-70);
  --colorBrandForegroundLink:     var(--brand-web-70);
  --colorBrandForegroundLinkHover:var(--brand-web-60);
  --colorCompoundBrandForeground1:var(--brand-web-80);

  /* Background */
  --colorNeutralBackground1:          var(--white);
  --colorNeutralBackground1Hover:     var(--grey-96);
  --colorNeutralBackground1Pressed:   var(--grey-88);
  --colorNeutralBackground1Selected:  var(--grey-92);
  --colorNeutralBackground2:          var(--grey-98);
  --colorNeutralBackground3:          var(--grey-96);
  --colorNeutralBackground4:          var(--grey-94);
  --colorNeutralBackground5:          var(--grey-92);
  --colorNeutralBackground6:          var(--grey-90);
  --colorNeutralBackgroundDisabled:   var(--grey-94);
  --colorSubtleBackground:            transparent;
  --colorSubtleBackgroundHover:       var(--grey-96);
  --colorSubtleBackgroundPressed:     var(--grey-88);
  --colorBackgroundOverlay:           var(--black-alpha-40);

  /* Brand background */
  --colorBrandBackground:         var(--brand-web-80);
  --colorBrandBackgroundHover:    var(--brand-web-70);
  --colorBrandBackgroundPressed:  var(--brand-web-40);
  --colorBrandBackgroundSelected: var(--brand-web-60);
  --colorBrandBackground2:        var(--brand-web-160);
  --colorBrandBackground2Hover:   var(--brand-web-150);
  --colorBrandBackgroundInverted: var(--white);

  /* Card */
  --colorNeutralCardBackground:        var(--grey-98);
  --colorNeutralCardBackgroundHover:   var(--white);
  --colorNeutralCardBackgroundPressed: var(--grey-96);

  /* Strokes */
  --colorNeutralStrokeAccessible: var(--grey-38);
  --colorNeutralStroke1:          var(--grey-82);
  --colorNeutralStroke1Hover:     var(--grey-78);
  --colorNeutralStroke2:          var(--grey-88);
  --colorNeutralStroke3:          var(--grey-94);
  --colorNeutralStrokeSubtle:     var(--grey-88);
  --colorNeutralStrokeOnBrand:    var(--white);
  --colorBrandStroke1:            var(--brand-web-80);
  --colorBrandStroke2:            var(--brand-web-140);
  --colorCompoundBrandStroke:     var(--brand-web-80);
  --colorTransparentStroke:       transparent;
  --colorStrokeFocus2:            var(--black);

  /* Shared persona / palette accents — pulled from sharedColors.ts */
  --color-red:        #d13438;
  --color-darkRed:    #750b1c;
  --color-cranberry:  #c50f1f;
  --color-pumpkin:    #ca5010;
  --color-darkOrange: #da3b01;
  --color-peach:      #ff8c00;
  --color-marigold:   #eaa300;
  --color-yellow:     #fde300;
  --color-gold:       #c19c00;
  --color-brass:      #986f0b;
  --color-brown:      #7a4f01;
  --color-darkBrown:  #4d291c;
  --color-lightGreen: #13a10e;
  --color-green:      #107c10;
  --color-darkGreen:  #0b6a0b;
  --color-seafoam:    #00cc6a;
  --color-lightTeal:  #00b7c3;
  --color-teal:       #038387;
  --color-darkTeal:   #006666;
  --color-cyan:       #0099bc;
  --color-steel:      #005b70;
  --color-blue:       #0078d4;
  --color-royalBlue:  #004e8c;
  --color-cornflower: #4f6bed;
  --color-navy:       #0027b4;
  --color-lavender:   #7160e8;
  --color-purple:     #5c2e91;
  --color-darkPurple: #401b6c;
  --color-grape:      #881798;
  --color-lilac:      #b146c2;
  --color-pink:       #e3008c;
  --color-magenta:    #bf0077;
  --color-plum:       #4e0a30;
  --color-beige:      #7a7574;
  --color-mink:       #5d5a58;
  --color-platinum:   #e9eaea;
  --color-anchor:     #394146;

  /* Status / system semantic */
  --colorStatusSuccessBackground1: #f1faf1;
  --colorStatusSuccessBackground3: #107c10;
  --colorStatusSuccessForeground1: #0e700e;
  --colorStatusSuccessForeground3: #ffffff;
  --colorStatusSuccessBorder1:     #9fd89f;

  --colorStatusWarningBackground1: #fff9f5;
  --colorStatusWarningBackground3: #f7630c;
  --colorStatusWarningForeground1: #bc4b09;
  --colorStatusWarningForeground3: #ffffff;
  --colorStatusWarningBorder1:     #fdcfb4;

  --colorStatusDangerBackground1:  #fdf3f4;
  --colorStatusDangerBackground3:  #c50f1f;
  --colorStatusDangerForeground1:  #b10e1c;
  --colorStatusDangerForeground3:  #ffffff;
  --colorStatusDangerBorder1:      #eeacb2;

  /* Shadows — composed from createShadowTokens(ambient, key) in tokens repo */
  --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.12), 0 14px 28px rgba(0,0,0,0.14);
  --shadow64: 0 0 8px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.14);
  --shadow2Brand:  0 0 2px rgba(0,0,0,0.30), 0 1px 2px  rgba(0,0,0,0.25);
  --shadow8Brand:  0 0 2px rgba(0,0,0,0.30), 0 4px 8px  rgba(0,0,0,0.25);
  --shadow16Brand: 0 0 2px rgba(0,0,0,0.30), 0 8px 16px rgba(0,0,0,0.25);
}

/* ----------------- 4. SEMANTIC ALIAS TOKENS (DARK) -------------------- */
/* Toggle by adding [data-theme="dark"] (or class .theme-dark) to a wrapper. */

[data-theme="dark"], .theme-dark {
  --colorNeutralForeground1:          var(--grey-100);
  --colorNeutralForeground1Hover:     var(--grey-100);
  --colorNeutralForeground2:          var(--grey-84);
  --colorNeutralForeground3:          var(--grey-68, #adadad);
  --colorNeutralForeground4:          var(--grey-60);
  --colorNeutralForegroundDisabled:   var(--grey-36);
  --colorNeutralForegroundOnBrand:    var(--white);
  --colorNeutralForegroundInverted:   var(--grey-14);

  --colorBrandForeground1:    var(--brand-web-100);
  --colorBrandForeground2:    var(--brand-web-110);
  --colorBrandForegroundLink: var(--brand-web-100);

  --colorNeutralBackground1:        #1f1f1f;
  --colorNeutralBackground1Hover:   #2e2e2e;
  --colorNeutralBackground1Pressed: #141414;
  --colorNeutralBackground2:        #1a1a1a;
  --colorNeutralBackground3:        #141414;
  --colorNeutralBackground4:        #0f0f0f;
  --colorNeutralBackground5:        #0a0a0a;
  --colorNeutralBackground6:        #242424;
  --colorNeutralBackgroundDisabled: #141414;
  --colorSubtleBackgroundHover:     var(--white-alpha-10);
  --colorSubtleBackgroundPressed:   var(--white-alpha-20);
  --colorBackgroundOverlay:         rgba(0,0,0,0.5);

  --colorBrandBackground:        var(--brand-web-70);
  --colorBrandBackgroundHover:   var(--brand-web-80);
  --colorBrandBackgroundPressed: var(--brand-web-40);
  --colorBrandBackground2:       var(--brand-web-20);

  --colorNeutralCardBackground:      #292929;
  --colorNeutralCardBackgroundHover: #2e2e2e;

  --colorNeutralStrokeAccessible: var(--grey-68, #adadad);
  --colorNeutralStroke1:          #666666;
  --colorNeutralStroke2:          #525252;
  --colorNeutralStroke3:          #3d3d3d;
  --colorNeutralStrokeSubtle:     #424242;
  --colorBrandStroke1:            var(--brand-web-100);
  --colorBrandStroke2:            var(--brand-web-50);
  --colorStrokeFocus2:            var(--white);

  --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 8px rgba(0,0,0,0.24), 0 14px 28px rgba(0,0,0,0.28);
  --shadow64: 0 0 8px rgba(0,0,0,0.24), 0 32px 64px rgba(0,0,0,0.28);
}

/* ------------------------- 5. TYPOGRAPHY ------------------------------ */
/* Segoe UI is Microsoft's primary system font for Fluent product surfaces.
   Calibri and Sitka Small are bundled here too as Microsoft's other long-
   running brand pairing (Calibri = Office sans, Sitka = Office serif).
   Use Segoe UI for product UI (default --fontFamilyBase). Reach for
   Calibri (--fontFamilyClassic) when emulating Office documents/decks,
   and Sitka (--fontFamilySerif) for editorial or long-form reading. */

/* Calibri — Microsoft's Office sans, used in Word/Excel/PowerPoint */
@font-face {
  font-family: "Calibri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Fluent_Calibri.ttf") format("truetype");
}
@font-face {
  font-family: "Calibri";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Fluent_Calibri-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Calibri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Fluent_Calibri-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Calibri";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Fluent_Calibri-BoldItalic.ttf") format("truetype");
}

/* Sitka Small — Microsoft's editorial serif, optimised at small sizes */
@font-face {
  font-family: "Sitka Small";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Fluent_SitkaSmall.ttf") format("truetype");
}
@font-face {
  font-family: "Sitka Small";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Fluent_SitkaSmall-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Sitka Small";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Fluent_SitkaSmall-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Sitka Small";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Fluent_SitkaSmall-BoldItalic.ttf") format("truetype");
}

:root {
  /* Primary product UI font (Fluent v9 default) */
  --fontFamilyBase:      "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --fontFamilyMonospace: Consolas, "Courier New", Courier, monospace;
  --fontFamilyNumeric:   Bahnschrift, "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;

  /* Office-document sans — Calibri */
  --fontFamilyClassic:   "Calibri", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  /* Editorial serif — Sitka Small */
  --fontFamilySerif:     "Sitka Small", "Cambria", Georgia, "Times New Roman", serif;

  /* Size scale */
  --fontSizeBase100: 10px;
  --fontSizeBase200: 12px;
  --fontSizeBase300: 14px;  /* default body */
  --fontSizeBase400: 16px;
  --fontSizeBase500: 20px;
  --fontSizeBase600: 24px;
  --fontSizeHero700: 28px;
  --fontSizeHero800: 32px;
  --fontSizeHero900: 40px;
  --fontSizeHero1000:68px;

  /* Line heights */
  --lineHeightBase100: 14px;
  --lineHeightBase200: 16px;
  --lineHeightBase300: 20px;
  --lineHeightBase400: 22px;
  --lineHeightBase500: 28px;
  --lineHeightBase600: 32px;
  --lineHeightHero700: 36px;
  --lineHeightHero800: 40px;
  --lineHeightHero900: 52px;
  --lineHeightHero1000:92px;

  /* Weights */
  --fontWeightRegular:  400;
  --fontWeightMedium:   500;
  --fontWeightSemibold: 600;
  --fontWeightBold:     700;
}

/* Semantic type styles — apply by class. Match @fluentui/react typographyStyles. */

.fui-caption2        { font: var(--fontWeightRegular)  var(--fontSizeBase100)/var(--lineHeightBase100) var(--fontFamilyBase); }
.fui-caption2Strong  { font: var(--fontWeightSemibold) var(--fontSizeBase100)/var(--lineHeightBase100) var(--fontFamilyBase); }
.fui-caption1        { font: var(--fontWeightRegular)  var(--fontSizeBase200)/var(--lineHeightBase200) var(--fontFamilyBase); }
.fui-caption1Strong  { font: var(--fontWeightSemibold) var(--fontSizeBase200)/var(--lineHeightBase200) var(--fontFamilyBase); }
.fui-body1           { font: var(--fontWeightRegular)  var(--fontSizeBase300)/var(--lineHeightBase300) var(--fontFamilyBase); }
.fui-body1Strong     { font: var(--fontWeightSemibold) var(--fontSizeBase300)/var(--lineHeightBase300) var(--fontFamilyBase); }
.fui-body1Stronger   { font: var(--fontWeightBold)     var(--fontSizeBase300)/var(--lineHeightBase300) var(--fontFamilyBase); }
.fui-body2           { font: var(--fontWeightRegular)  var(--fontSizeBase400)/var(--lineHeightBase400) var(--fontFamilyBase); }
.fui-subtitle2       { font: var(--fontWeightSemibold) var(--fontSizeBase400)/var(--lineHeightBase400) var(--fontFamilyBase); }
.fui-subtitle2Stronger{font: var(--fontWeightBold)     var(--fontSizeBase400)/var(--lineHeightBase400) var(--fontFamilyBase); }
.fui-subtitle1       { font: var(--fontWeightSemibold) var(--fontSizeBase500)/var(--lineHeightBase500) var(--fontFamilyBase); }
.fui-title3          { font: var(--fontWeightSemibold) var(--fontSizeBase600)/var(--lineHeightBase600) var(--fontFamilyBase); }
.fui-title2          { font: var(--fontWeightSemibold) var(--fontSizeHero700)/var(--lineHeightHero700) var(--fontFamilyBase); }
.fui-title1          { font: var(--fontWeightSemibold) var(--fontSizeHero800)/var(--lineHeightHero800) var(--fontFamilyBase); }
.fui-largeTitle      { font: var(--fontWeightSemibold) var(--fontSizeHero900)/var(--lineHeightHero900) var(--fontFamilyBase); }
.fui-display         { font: var(--fontWeightSemibold) var(--fontSizeHero1000)/var(--lineHeightHero1000) var(--fontFamilyBase); }

/* ----------------------- 6. SPACING TOKENS ---------------------------- */

:root {
  --spacingHorizontalNone:   0;
  --spacingHorizontalXXS:    2px;
  --spacingHorizontalXS:     4px;
  --spacingHorizontalSNudge: 6px;
  --spacingHorizontalS:      8px;
  --spacingHorizontalMNudge: 10px;
  --spacingHorizontalM:      12px;
  --spacingHorizontalL:      16px;
  --spacingHorizontalXL:     20px;
  --spacingHorizontalXXL:    24px;
  --spacingHorizontalXXXL:   32px;

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

/* ----------------------- 7. RADIUS + STROKE --------------------------- */

:root {
  --borderRadiusNone:    0;
  --borderRadiusSmall:   2px;
  --borderRadiusMedium:  4px;   /* default for buttons, inputs */
  --borderRadiusLarge:   6px;
  --borderRadiusXLarge:  8px;   /* default for cards */
  --borderRadius2XLarge: 12px;
  --borderRadius3XLarge: 16px;
  --borderRadius4XLarge: 24px;
  --borderRadius5XLarge: 32px;
  --borderRadius6XLarge: 40px;
  --borderRadiusCircular: 10000px;

  --strokeWidthThin:     1px;
  --strokeWidthThick:    2px;
  --strokeWidthThicker:  3px;
  --strokeWidthThickest: 4px;
}

/* ----------------------- 8. MOTION TOKENS ----------------------------- */

:root {
  --durationUltraFast: 50ms;
  --durationFaster:    100ms;
  --durationFast:      150ms;
  --durationNormal:    200ms;
  --durationGentle:    250ms;
  --durationSlow:      300ms;
  --durationSlower:    400ms;
  --durationUltraSlow: 500ms;

  --curveAccelerateMax: cubic-bezier(0.9,0.1,1,0.2);
  --curveAccelerateMid: cubic-bezier(1,0,1,1);
  --curveAccelerateMin: cubic-bezier(0.8,0,0.78,1);
  --curveDecelerateMax: cubic-bezier(0.1,0.9,0.2,1);
  --curveDecelerateMid: cubic-bezier(0,0,0,1);
  --curveDecelerateMin: cubic-bezier(0.33,0,0.1,1);
  --curveEasyEaseMax:   cubic-bezier(0.8,0,0.2,1);
  --curveEasyEase:      cubic-bezier(0.33,0,0.67,1); /* default */
  --curveLinear:        cubic-bezier(0,0,1,1);
}

/* ------------------------ 9. BASE RESET ------------------------------- */
/* Apply on body/root containers to get the Fluent baseline. */

.fui-theme {
  font-family: var(--fontFamilyBase);
  font-size: var(--fontSizeBase300);
  line-height: var(--lineHeightBase300);
  color: var(--colorNeutralForeground1);
  background: var(--colorNeutralBackground1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}