/* Lassy Meet — design tokens.

   Not invented. Every value here was read out of the real Microsoft Teams
   bundle saved in `team_html/` (see frontend/README.md, "Where the design
   came from"). The ramps below are Fluent UI v9's neutral grey ramp and the
   Teams brand ramp; the token→ramp mapping is Fluent's `createLightTheme`
   /`createDarkTheme` as Teams ships it.

   Two consequences worth knowing before editing anything:

   1. Component CSS is written in `rem` at a 10px root (base.css sets
      62.5%), because that is the unit Teams' own atomic CSS uses. A value
      copied from the reference — `1.6rem`, `0.1rem` — drops in unchanged.
   2. The *type* tokens are px on purpose. Teams ships them as px so text
      does not rescale with the 10px root trick. Do not "fix" them to rem.
*/

:root {
  /* -- ramps ------------------------------------------------------------ */
  /* Fluent neutral grey ramp — index is HSL lightness. */
  --grey2:  #050505; --grey4:  #0a0a0a; --grey6:  #0f0f0f; --grey8:  #141414;
  --grey10: #1a1a1a; --grey12: #1f1f1f; --grey14: #242424; --grey16: #292929;
  --grey18: #2e2e2e; --grey20: #333333; --grey22: #383838; --grey24: #3d3d3d;
  --grey26: #424242; --grey28: #474747; --grey30: #4d4d4d; --grey32: #525252;
  --grey34: #575757; --grey36: #5c5c5c; --grey38: #616161; --grey40: #666666;
  --grey42: #6b6b6b; --grey44: #707070; --grey46: #757575; --grey48: #7a7a7a;
  --grey50: #808080; --grey52: #858585; --grey54: #8a8a8a; --grey56: #8f8f8f;
  --grey58: #949494; --grey60: #999999; --grey62: #9e9e9e; --grey64: #a3a3a3;
  --grey66: #a8a8a8; --grey68: #adadad; --grey70: #b3b3b3; --grey72: #b8b8b8;
  --grey74: #bdbdbd; --grey76: #c2c2c2; --grey78: #c7c7c7; --grey80: #cccccc;
  --grey82: #d1d1d1; --grey84: #d6d6d6; --grey86: #dbdbdb; --grey88: #e0e0e0;
  --grey90: #e6e6e6; --grey92: #ebebeb; --grey94: #f0f0f0; --grey96: #f5f5f5;
  --grey98: #fafafa; --grey99: #fcfcfc;

  /* Teams brand ramp. */
  --brand10:  #2b2b40; --brand20:  #2f2f4a; --brand30:  #333357;
  --brand40:  #383966; --brand50:  #3d3e78; --brand60:  #444791;
  --brand70:  #4f52b2; --brand80:  #5b5fc7; --brand90:  #7579eb;
  --brand100: #7f85f5; --brand110: #9299f7; --brand120: #aab1fa;
  --brand130: #b6bcfa; --brand140: #c5cbfa; --brand150: #dce0fa;
  --brand160: #e8ebfa;

  /* Fluent status ramps used by the app: cranberry = danger, green = success. */
  --cranberryShade30: #6e0811; --cranberryShade20: #960b18;
  --cranberryShade10: #b10e1c; --cranberryPrimary: #c50f1f;
  --cranberryTint20:  #d33f4c; --cranberryTint30:  #dc626d;
  --cranberryTint40:  #eeacb2; --cranberryTint60:  #fdf3f4;
  --greenShade20: #0e700e; --greenShade10: #0e7a0e; --greenPrimary: #107c10;
  --greenTint40:  #9fd89f; --greenTint60:  #f1faf1;
  --yellowShade20: #805e0b; --yellowPrimary: #fde300; --yellowTint40: #fef7b2;
  --yellowTint60:  #fffef5;

  /* -- typography ------------------------------------------------------- */
  --fontFamilyBase: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system,
                    BlinkMacSystemFont, Roboto, 'Helvetica Neue', sans-serif;
  --fontFamilyMonospace: Consolas, 'Courier New', Courier, monospace;

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

  --lineHeightBase100: 14px; --lineHeightBase200: 16px; --lineHeightBase300: 20px;
  --lineHeightBase400: 22px; --lineHeightBase500: 28px; --lineHeightBase600: 32px;
  --lineHeightHero700: 36px; --lineHeightHero800: 40px; --lineHeightHero900: 52px;

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

  /* -- shape ------------------------------------------------------------ */
  --borderRadiusNone: 0;    --borderRadiusSmall: 2px;  --borderRadiusMedium: 4px;
  --borderRadiusLarge: 6px; --borderRadiusXLarge: 8px; --borderRadius2XLarge: 12px;
  --borderRadius3XLarge: 16px; --borderRadius4XLarge: 24px;
  --borderRadiusCircular: 10000px;

  --strokeWidthThin: 1px; --strokeWidthThick: 2px; --strokeWidthThicker: 3px;

  /* -- spacing ---------------------------------------------------------- */
  --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;

  /* -- motion ----------------------------------------------------------- */
  --durationUltraFast: 50ms;  --durationFaster: 100ms; --durationFast: 150ms;
  --durationNormal: 200ms;    --durationSlow: 300ms;   --durationSlower: 400ms;
  --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);
  --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1);
  --curveEasyEaseMax: cubic-bezier(0.8, 0, 0.2, 1);
  --curveLinear: cubic-bezier(0, 0, 1, 1);

  /* -- z-index ---------------------------------------------------------- */
  --zIndexBackground: 0;  --zIndexContent: 1;    --zIndexOverlay: 1000;
  --zIndexPopup: 2000;    --zIndexMessages: 3000; --zIndexFloating: 4000;
  --zIndexPriority: 5000;

  /* -- app chrome ------------------------------------------------------- */
  /* Measured off the reference DOM. */
  --titleBarHeight: 4.8rem;
  /* Icons-only rail, as the live client ships it. The capture's 6.8rem slot
     was the labelled variant. */
  --appBarWidth: 4.8rem;
  /* The control is 4.8rem (`f1msd6ry`) and carries `margin: SNudge XS`
     (`f1rqtxy5`); the reference's bar is a grid with no height of its own, so
     it measures control + margins = 6rem. Pinning the bar to 4.8rem is what
     made every button hang 6px below its bottom rule. */
  --ubarHeight: 6rem;
  --ubarControlHeight: 4.8rem;
  --sidePanelWidth: 32rem;
}

/* =====================================================================
   LIGHT — Fluent `createLightTheme(brandTeams)`, which is what the
   reference capture was running.
   ===================================================================== */
:root {
  color-scheme: light;

  --colorNeutralForeground1: var(--grey14);
  --colorNeutralForeground1Hover: var(--grey14);
  --colorNeutralForeground1Pressed: var(--grey14);
  --colorNeutralForeground1Selected: var(--grey14);
  --colorNeutralForeground2: var(--grey26);
  --colorNeutralForeground2Hover: var(--grey14);
  --colorNeutralForeground2Pressed: var(--grey14);
  --colorNeutralForeground2Selected: var(--grey14);
  --colorNeutralForeground2BrandHover: var(--brand80);
  --colorNeutralForeground2BrandPressed: var(--brand70);
  --colorNeutralForeground2BrandSelected: var(--brand80);
  --colorNeutralForeground3: var(--grey38);
  --colorNeutralForeground3Hover: var(--grey26);
  --colorNeutralForeground3Pressed: var(--grey26);
  --colorNeutralForeground3Selected: var(--grey26);
  --colorNeutralForeground3BrandHover: var(--brand80);
  --colorNeutralForeground3BrandPressed: var(--brand70);
  --colorNeutralForeground4: var(--grey44);
  --colorNeutralForegroundDisabled: var(--grey74);
  --colorNeutralForegroundInverted: #ffffff;
  --colorNeutralForegroundInverted2: #ffffff;
  --colorNeutralForegroundOnBrand: #ffffff;
  --colorNeutralForegroundStaticInverted: #ffffff;
  --colorNeutralForeground1Static: var(--grey14);

  --colorBrandForeground1: var(--brand80);
  --colorBrandForeground2: var(--brand70);
  --colorBrandForegroundLink: var(--brand70);
  --colorBrandForegroundLinkHover: var(--brand60);
  --colorBrandForegroundLinkPressed: var(--brand40);
  --colorBrandForegroundLinkSelected: var(--brand70);
  --colorCompoundBrandForeground1: var(--brand80);
  --colorCompoundBrandForeground1Hover: var(--brand70);
  --colorCompoundBrandForeground1Pressed: var(--brand60);

  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground1Hover: var(--grey96);
  --colorNeutralBackground1Pressed: var(--grey88);
  --colorNeutralBackground1Selected: var(--grey92);
  --colorNeutralBackground2: var(--grey98);
  --colorNeutralBackground2Hover: var(--grey94);
  --colorNeutralBackground2Pressed: var(--grey86);
  --colorNeutralBackground2Selected: var(--grey90);
  --colorNeutralBackground3: var(--grey96);
  --colorNeutralBackground3Hover: var(--grey92);
  --colorNeutralBackground3Pressed: var(--grey84);
  --colorNeutralBackground3Selected: var(--grey88);
  --colorNeutralBackground4: var(--grey94);
  --colorNeutralBackground4Hover: var(--grey98);
  --colorNeutralBackground4Pressed: var(--grey96);
  --colorNeutralBackground5: var(--grey92);
  --colorNeutralBackground5Hover: var(--grey96);
  --colorNeutralBackground5Pressed: var(--grey94);
  --colorNeutralBackground5Selected: var(--grey98);
  --colorNeutralBackground6: var(--grey90);
  --colorNeutralBackgroundInverted: var(--grey16);
  --colorNeutralBackgroundStatic: var(--grey20);
  --colorNeutralBackgroundDisabled: var(--grey94);
  --colorNeutralBackgroundAlpha: rgba(255, 255, 255, 0.5);
  --colorNeutralBackgroundAlpha2: rgba(255, 255, 255, 0.8);
  --colorNeutralCardBackground: var(--grey98);
  --colorNeutralCardBackgroundHover: #ffffff;

  --colorSubtleBackground: transparent;
  --colorSubtleBackgroundHover: var(--grey96);
  --colorSubtleBackgroundPressed: var(--grey88);
  --colorSubtleBackgroundSelected: var(--grey92);
  --colorTransparentBackground: transparent;
  --colorTransparentBackgroundHover: transparent;
  --colorTransparentBackgroundPressed: transparent;

  /* Your own chat bubble, and it is a GRADIENT rather than a colour — which
     is why a flat brand fill was always slightly off.

     `--chatThemeMyBubbleBackground` is set by the chat theme at runtime and
     resolves nowhere in the saved CSS, but the theme table itself is in the
     bundle, and the default theme reads:

       lightTheme: { globalAccentMyBubbleForeground: "#FFFFFF",
                     globalAccentMyBubbleBackground:
                       "linear-gradient(193.26deg, #8C5BD2 0%, #5B5FC7 75%, #4F52B2 100%)" }

     verbatim, from async-entry-*.js. The midpoint is brand 80 and the end is
     brand 70, which is what the flat version was approximating with one of
     the three stops. */
  --chatMyBubbleBackground: linear-gradient(193.26deg, #8C5BD2 0%, #5B5FC7 75%, #4F52B2 100%);
  /* Painted under the gradient, so a browser that drops the image still gets
     a readable bubble rather than the panel showing through. */
  --chatMyBubbleFallback: var(--brand80);
  --chatMyBubbleForeground: #ffffff;

  --colorBrandBackground: var(--brand80);
  --colorBrandBackgroundHover: var(--brand70);
  --colorBrandBackgroundPressed: var(--brand40);
  --colorBrandBackgroundSelected: var(--brand60);
  --colorBrandBackgroundStatic: var(--brand80);
  --colorBrandBackground2: var(--brand160);
  --colorBrandBackground2Hover: var(--brand150);
  --colorBrandBackground2Pressed: var(--brand130);
  --colorCompoundBrandBackground: var(--brand80);
  --colorCompoundBrandBackgroundHover: var(--brand70);
  --colorCompoundBrandBackgroundPressed: var(--brand60);

  --colorNeutralStroke1: var(--grey82);
  --colorNeutralStroke1Hover: var(--grey78);
  --colorNeutralStroke1Pressed: var(--grey70);
  --colorNeutralStroke1Selected: var(--grey74);
  --colorNeutralStroke2: var(--grey88);
  --colorNeutralStroke3: var(--grey94);
  --colorNeutralStrokeSubtle: var(--grey88);
  --colorNeutralStrokeAccessible: var(--grey38);
  --colorNeutralStrokeAccessibleHover: var(--grey34);
  --colorNeutralStrokeAccessiblePressed: var(--grey30);
  --colorNeutralStrokeDisabled: var(--grey88);
  --colorNeutralStrokeOnBrand: #ffffff;
  --colorNeutralStrokeAlpha: rgba(0, 0, 0, 0.05);
  --colorBrandStroke1: var(--brand80);
  --colorBrandStroke2: var(--brand140);
  --colorCompoundBrandStroke: var(--brand80);
  --colorCompoundBrandStrokeHover: var(--brand70);
  --colorCompoundBrandStrokePressed: var(--brand60);
  --colorTransparentStroke: transparent;
  --colorTransparentStrokeInteractive: transparent;
  --colorTransparentStrokeDisabled: transparent;

  --colorStrokeFocus1: #ffffff;
  --colorStrokeFocus2: #000000;

  --colorBackgroundOverlay: rgba(0, 0, 0, 0.4);
  --colorScrollbarOverlay: rgba(0, 0, 0, 0.5);

  /* What a tile dims to under a landing reaction. Not one of Fluent's -- the
     capture has no reaction scrim in it to read (see meeting.css) -- so it is
     kept separate from `--colorBackgroundOverlay` above, which belongs to the
     dialogs and should not follow this one darker. */
  --reactionScrim: rgba(0, 0, 0, 0.55);

  --colorNeutralShadowAmbient: rgba(0, 0, 0, 0.12);
  --colorNeutralShadowKey: rgba(0, 0, 0, 0.14);
  --colorNeutralShadowAmbientLighter: rgba(0, 0, 0, 0.06);
  --colorNeutralShadowKeyLighter: rgba(0, 0, 0, 0.07);
  --colorNeutralShadowAmbientDarker: rgba(0, 0, 0, 0.2);
  --colorNeutralShadowKeyDarker: rgba(0, 0, 0, 0.24);

  --colorStatusDangerBackground1: var(--cranberryTint60);
  --colorStatusDangerBackground3: var(--cranberryPrimary);
  --colorStatusDangerForeground1: var(--cranberryShade10);
  --colorStatusDangerForeground3: var(--cranberryPrimary);
  --colorStatusDangerBorder1: var(--cranberryTint40);
  --colorStatusSuccessBackground1: var(--greenTint60);
  --colorStatusSuccessBackground3: var(--greenPrimary);
  --colorStatusSuccessForeground1: var(--greenShade10);
  --colorStatusSuccessBorder1: var(--greenTint40);
  --colorStatusWarningBackground1: var(--yellowTint60);
  --colorStatusWarningForeground1: var(--yellowShade20);
  --colorStatusWarningBorder1: var(--yellowTint40);

  /* Raised hand. Amber rather than the yellow ramp's primary, which is a
     highlighter next to the pale tiles it has to sit on. */
  --colorRaisedHand: #eaa300;
  --colorRaisedHandInk: #4a3a00;

  /* Fluent's stencil stroke, resolved from the reference bundle
     (`Stencil1Alpha` -> `Kn = rgba(0, 0, 0, 0.1)` in light,
     `Wn = rgba(255, 255, 255, 0.1)` in dark). Used for the tile hairline. */
  --colorNeutralStencil1Alpha: rgba(0, 0, 0, 0.1);

  /* Camera-off tile palettes. The slot is chosen by tilePaletteFor() in
     js/dom.js and applied as an inline custom property, so the colour has to
     live here to be theme-swappable at all. These are the values that used to
     be literals in that file - light renders identically to before. */
  --tile1-from: #fbf3e8; --tile1-to: #f7e2e2; --tile1-avatar: #bfe0e0; --tile1-ink: #14545a;
  --tile2-from: #eaf6ee; --tile2-to: #dcefe3; --tile2-avatar: #f2ddc1; --tile2-ink: #6b4a1f;
  --tile3-from: #f0eefb; --tile3-to: #e7e5f8; --tile3-avatar: #cfe3f7; --tile3-ink: #1c4a70;
  --tile4-from: #fdf0e7; --tile4-to: #fae5dc; --tile4-avatar: #d9e8c8; --tile4-ink: #3d5a1f;
  --tile5-from: #eaf3fb; --tile5-to: #dfedfa; --tile5-avatar: #f6dbe4; --tile5-ink: #6e2140;
  --tile6-from: #f8f2e6; --tile6-to: #f2ebdc; --tile6-avatar: #d7dcf5; --tile6-ink: #2a2f66;

  /* Fluent's elevation set, built from the two shadow colours above. */
  --shadow2:  0 0 2px var(--colorNeutralShadowAmbient), 0 1px 2px var(--colorNeutralShadowKey);
  --shadow4:  0 0 2px var(--colorNeutralShadowAmbient), 0 2px 4px var(--colorNeutralShadowKey);
  --shadow8:  0 0 2px var(--colorNeutralShadowAmbient), 0 4px 8px var(--colorNeutralShadowKey);
  --shadow16: 0 0 2px var(--colorNeutralShadowAmbient), 0 8px 16px var(--colorNeutralShadowKey);
  --shadow28: 0 0 8px var(--colorNeutralShadowAmbient), 0 14px 28px var(--colorNeutralShadowKey);
  --shadow64: 0 0 8px var(--colorNeutralShadowAmbient), 0 32px 64px var(--colorNeutralShadowKey);
}

/* =====================================================================
   DARK — Fluent `createDarkTheme(brandTeams)`. Only the tokens whose
   mapping actually differs are restated; everything else inherits.
   ===================================================================== */
:root[data-theme='dark'] {
  color-scheme: dark;

  /* A black thumb is invisible on a dark surface. */
  --colorScrollbarOverlay: rgba(255, 255, 255, 0.5);

  --colorNeutralForeground1: #ffffff;
  --colorNeutralForeground1Hover: #ffffff;
  --colorNeutralForeground1Pressed: #ffffff;
  --colorNeutralForeground1Selected: #ffffff;
  --colorNeutralForeground2: var(--grey84);
  --colorNeutralForeground2Hover: #ffffff;
  --colorNeutralForeground2Pressed: #ffffff;
  --colorNeutralForeground2Selected: #ffffff;
  --colorNeutralForeground2BrandHover: var(--brand100);
  --colorNeutralForeground2BrandPressed: var(--brand90);
  --colorNeutralForeground2BrandSelected: var(--brand100);
  --colorNeutralForeground3: var(--grey68);
  --colorNeutralForeground3Hover: var(--grey84);
  --colorNeutralForeground3Pressed: var(--grey84);
  --colorNeutralForeground3Selected: var(--grey84);
  --colorNeutralForeground3BrandHover: var(--brand100);
  --colorNeutralForeground3BrandPressed: var(--brand90);
  --colorNeutralForeground4: var(--grey60);
  --colorNeutralForegroundDisabled: var(--grey36);
  --colorNeutralForeground1Static: var(--grey14);

  --colorBrandForeground1: var(--brand100);
  --colorBrandForeground2: var(--brand110);
  --colorBrandForegroundLink: var(--brand100);
  --colorBrandForegroundLinkHover: var(--brand110);
  --colorBrandForegroundLinkPressed: var(--brand90);
  --colorBrandForegroundLinkSelected: var(--brand100);
  --colorCompoundBrandForeground1: var(--brand100);
  --colorCompoundBrandForeground1Hover: var(--brand110);
  --colorCompoundBrandForeground1Pressed: var(--brand90);

  --colorNeutralBackground1: var(--grey16);
  --colorNeutralBackground1Hover: var(--grey24);
  --colorNeutralBackground1Pressed: var(--grey12);
  --colorNeutralBackground1Selected: var(--grey22);
  --colorNeutralBackground2: var(--grey14);
  --colorNeutralBackground2Hover: var(--grey22);
  --colorNeutralBackground2Pressed: var(--grey10);
  --colorNeutralBackground2Selected: var(--grey20);
  --colorNeutralBackground3: var(--grey12);
  --colorNeutralBackground3Hover: var(--grey20);
  --colorNeutralBackground3Pressed: var(--grey8);
  --colorNeutralBackground3Selected: var(--grey18);
  --colorNeutralBackground4: var(--grey8);
  --colorNeutralBackground4Hover: var(--grey16);
  --colorNeutralBackground4Pressed: var(--grey4);
  --colorNeutralBackground5: var(--grey4);
  --colorNeutralBackground5Hover: var(--grey12);
  --colorNeutralBackground5Pressed: #000000;
  --colorNeutralBackground5Selected: var(--grey10);
  --colorNeutralBackground6: var(--grey20);
  --colorNeutralBackgroundInverted: #ffffff;
  --colorNeutralBackgroundStatic: var(--grey24);
  --colorNeutralBackgroundDisabled: var(--grey8);
  --colorNeutralBackgroundAlpha: rgba(0, 0, 0, 0.5);
  --colorNeutralBackgroundAlpha2: rgba(0, 0, 0, 0.7);
  --colorNeutralCardBackground: var(--grey20);
  --colorNeutralCardBackgroundHover: var(--grey24);

  --colorSubtleBackgroundHover: var(--grey22);
  --colorSubtleBackgroundPressed: var(--grey18);
  --colorSubtleBackgroundSelected: var(--grey20);

  /* The same theme's dark half, verbatim from the same table:
       darkTheme: { globalAccentMyBubbleForeground: "#FFFFFF",
                    globalAccentMyBubbleBackground:
                      "linear-gradient(193.13deg, #7751B0 0%, #5254A8 75%, #484B99 100%)" }
     Note the angle differs from the light one by a tenth of a degree; that is
     Teams' own value, not a transcription slip. */
  --chatMyBubbleBackground: linear-gradient(193.13deg, #7751B0 0%, #5254A8 75%, #484B99 100%);
  --chatMyBubbleFallback: var(--brand70);
  --chatMyBubbleForeground: #ffffff;

  --colorNeutralStencil1Alpha: rgba(255, 255, 255, 0.1);

  /* Fluent's dark-theme scrim: `colorBackgroundOverlay: a.Q1[50]` where
     `50: "rgba(0, 0, 0, 0.5)"`, read out of the bundle's theme table. */
  --colorBackgroundOverlay: rgba(0, 0, 0, 0.5);
  /* A step past it, as in the light theme -- a dark tile needs the extra to
     read as dimmed at all. */
  --reactionScrim: rgba(0, 0, 0, 0.65);

  /* The tile GROUNDS go dark: the same hues taken to L~16%, which sits just
     above the stage's #1f1f1f and just under Fluent's dark card grey.

     The DISCS do not. avatar/ink used to be the light pair swapped -- a dark
     disc with pale initials -- which is the tidy thing to do and the wrong one:
     the reference keeps a person's disc the same bright colour in both themes,
     and a dark disc on a dark tile is a hole where a face should be. So only
     `from`/`to` are overridden here and the discs inherit the light values
     above, which is also what keeps one person one colour across the themes. */
  --tile1-from: #2b2620; --tile1-to: #332727;
  --tile2-from: #202b24; --tile2-to: #26332c;
  --tile3-from: #24222e; --tile3-to: #2a2836;
  --tile4-from: #2e2620; --tile4-to: #362c25;
  --tile5-from: #202730; --tile5-to: #252e38;
  --tile6-from: #2a2720; --tile6-to: #302c25;

  --colorBrandBackground: var(--brand70);
  --colorBrandBackgroundHover: var(--brand80);
  --colorBrandBackgroundPressed: var(--brand40);
  --colorBrandBackgroundSelected: var(--brand60);
  --colorBrandBackgroundStatic: var(--brand80);
  --colorBrandBackground2: var(--brand20);
  --colorBrandBackground2Hover: var(--brand40);
  --colorBrandBackground2Pressed: var(--brand10);
  --colorCompoundBrandBackground: var(--brand100);
  --colorCompoundBrandBackgroundHover: var(--brand110);
  --colorCompoundBrandBackgroundPressed: var(--brand90);

  --colorNeutralStroke1: var(--grey40);
  --colorNeutralStroke1Hover: var(--grey46);
  --colorNeutralStroke1Pressed: var(--grey42);
  --colorNeutralStroke1Selected: var(--grey44);
  --colorNeutralStroke2: var(--grey32);
  --colorNeutralStroke3: var(--grey24);
  --colorNeutralStrokeSubtle: var(--grey32);
  --colorNeutralStrokeAccessible: var(--grey68);
  --colorNeutralStrokeAccessibleHover: var(--grey74);
  --colorNeutralStrokeAccessiblePressed: var(--grey70);
  --colorNeutralStrokeDisabled: var(--grey32);
  --colorNeutralStrokeAlpha: rgba(255, 255, 255, 0.1);
  --colorBrandStroke1: var(--brand100);
  --colorBrandStroke2: var(--brand30);
  --colorCompoundBrandStroke: var(--brand100);
  --colorCompoundBrandStrokeHover: var(--brand110);
  --colorCompoundBrandStrokePressed: var(--brand90);

  --colorStrokeFocus1: #000000;
  --colorStrokeFocus2: #ffffff;

  --colorNeutralShadowAmbient: rgba(0, 0, 0, 0.24);
  --colorNeutralShadowKey: rgba(0, 0, 0, 0.28);

  --colorStatusDangerBackground1: #3b1113;
  --colorStatusDangerBackground3: var(--cranberryPrimary);
  --colorStatusDangerForeground1: var(--cranberryTint30);
  --colorStatusDangerForeground3: var(--cranberryTint30);
  --colorStatusDangerBorder1: var(--cranberryShade20);
  --colorStatusSuccessBackground1: #052505;
  --colorStatusSuccessForeground1: var(--greenTint40);
  --colorStatusSuccessBorder1: var(--greenShade20);
  --colorStatusWarningBackground1: #221a00;
  --colorStatusWarningForeground1: var(--yellowTint40);
  --colorStatusWarningBorder1: var(--yellowShade20);
}