@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:GRAD,ROND,opsz,slnt,wdth,wght@0..100,0..100,6..144,-10..0,25..151,1..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root {
  --Body-Font-Family: var(--Set-Font-Family-Body);
  --Font-Family-Body: var(--Set-Font-Family-Body);
  --Header-Font-Family: var(--Set-Font-Family-Header);
  --Font-Family-Header: var(--Set-Font-Family-Header);
  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
  --Header-Text-Transform: var(--Set-Header-Text-Transform, none);
  --Header-Letter-Spacing: var(--Set-Header-Letter-Spacing, 0em);
  --Decorative-Font-Family: var(--Set-Font-Family-Decorative);
  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
  --Decorative-Text-Transform: var(--Set-Decorative-Text-Transform, none);
  --Decorative-Letter-Spacing: var(--Set-Decorative-Letter-Spacing, 0em);
  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
  --Cognitive-Multiplier: 1;
  --Dropshadow-Color: 20, 20, 20;  /* fallback; overridden per-theme in Light/Dark-Mode.css */
}

/* Platform Font Overrides */
[data-platform="IOS-Mobile"][data-fonts] {
  --Body-Font-Family: var(--Set-Font-Family-Body);
  --Header-Font-Family: var(--Set-Font-Family-Header);
  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
  --Decorative-Font-Family: var(--Set-Font-Family-Decorative);
  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
}
[data-platform="IOS-Tablet"][data-fonts] {
  --Body-Font-Family: var(--Set-Font-Family-Body);
  --Header-Font-Family: var(--Set-Font-Family-Header);
  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
  --Decorative-Font-Family: var(--Set-Font-Family-Decorative);
  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
}
[data-platform="Android"][data-fonts] {
  --Body-Font-Family: var(--Set-Font-Family-Body);
  --Header-Font-Family: var(--Set-Font-Family-Header);
  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
  --Decorative-Font-Family: var(--Set-Font-Family-Decorative);
  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
}

[data-platform="IOS-Mobile"][data-fonts="Default"] {
  --Body-Font-Family: "SF Pro";
  --Header-Font-Family: "SF Pro";
  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
  --Decorative-Font-Family: "SF Pro";
  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
}
[data-platform="IOS-Tablet"][data-fonts="Default"] {
  --Body-Font-Family: "SF Pro";
  --Header-Font-Family: "SF Pro";
  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
  --Decorative-Font-Family: "SF Pro";
  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
}
[data-platform="Android"][data-fonts="Default"] {
  --Body-Font-Family: "Roboto";
  --Header-Font-Family: "Roboto";
  --Header-Font-Weight: var(--Set-Font-Family-Header-Weight);
  --Decorative-Font-Family: "Roboto";
  --Decorative-Font-Weight: var(--Set-Font-Family-Decorative-Weight);
  --Body-Font-Weight: var(--Set-Font-Family-Body-Weight);
  --Body-Semibold-Font-Weight: var(--Set-Font-Family-Body-Semibold-Weight);
  --Body-Bold-Font-Weight: var(--Set-Font-Family-Body-Bold-Weight);
}

/* Desktop Defaults */
:root {
  --Container-Padding: var(--Sizing-4);
  --Platform-Label: "Desktop";
  --Button-Height: 32px;
  --Min-Button-Width: 80px;
  --Set-Font-Family-Header: 'Google Sans Flex', sans-serif;
  --Set-Font-Family-Header-Weight: 300;
  --Set-Header-Text-Transform: none;
  --Set-Header-Letter-Spacing: -0.01em;
  /* The four faces. Display is the expressive pick, Eyebrow is the OS UI stack
     unless a design overrides it, Header is always the Flex face. */
  --Set-Font-Family-Display: 'Raleway', sans-serif;
  --Set-Font-Family-Eyebrow: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Kept so designs saved before the four faces still resolve. */
  --Set-Font-Family-Decorative: 'Raleway', sans-serif;
  --Set-Font-Family-Decorative-Weight: 400;
  --Set-Decorative-Text-Transform: none;
  --Set-Decorative-Letter-Spacing: 0em;
  --Set-Font-Family-Body: 'Poppins', sans-serif;
  --Set-Font-Family-Body-Weight: 400;
  --Set-Font-Family-Body-Semibold-Weight: 600;
  --Set-Font-Family-Body-Bold-Weight: 700;
  --Body-Font-Size: 16px;
  --Body-Letter-Spacing: 0;
  --Body-Line-Height: 24px;
  --Body-Paragraph-Spacing: 16px;
  /* Per-style ramp — generated from the same type scale that produces
     typography-tokens.css, so a consumer that never sets data-platform gets
     the identical Desktop values. Editing sizes here is wrong; edit
     src/utils/typeScale.ts. */
  /* Faces */
  --Font-Family-Display: var(--Set-Font-Family-Display, var(--Platform-Font-Families-Decorative, var(--Set-Font-Family-Decorative)));
  --Font-Family-Header: var(--Platform-Font-Families-Header, var(--Set-Font-Family-Header));
  --Font-Family-Eyebrow: var(--Set-Font-Family-Eyebrow, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --Font-Family-Body: var(--Platform-Font-Families-Body, var(--Set-Font-Family-Body));

  /* Face weights */
  --Font-Weight-Display: 400;
  --Font-Weight-Header: 300;
  --Font-Weight-Eyebrow: 400;
  --Font-Weight-Body: 400;

  /* Variable-font axes */
  --Font-Roundness-Header: 8;
  --Font-Slant-Header: 0;
  --Font-Grade-Header: 0;
  --Font-Optical-Size-Header: 72;
  --Font-Width-Header: 100;
  --Font-Variation-Header: "ROND" var(--Font-Roundness-Header), "slnt" var(--Font-Slant-Header), "GRAD" var(--Font-Grade-Header), "opsz" var(--Font-Optical-Size-Header), "wdth" var(--Font-Width-Header);

  /* Display — Large and Medium belong in Header or Hero areas. Small is the one sized to sit inside a component — a card title, a stat, a pull quote. */
  --Display-Large-Font-Family:   var(--Font-Family-Display);
  --Display-Large-Font-Size:     72px;
  --Display-Large-Font-Weight:   var(--Font-Weight-Display);
  --Display-Large-Line-Height:   88px;
  --Display-Large-Letter-Spacing: 0em;
  --Display-Large-Text-Transform: none;
  --Display-Medium-Font-Family:   var(--Font-Family-Display);
  --Display-Medium-Font-Size:     60px;
  --Display-Medium-Font-Weight:   var(--Font-Weight-Display);
  --Display-Medium-Line-Height:   76px;
  --Display-Medium-Letter-Spacing: 0em;
  --Display-Medium-Text-Transform: none;
  --Display-Small-Font-Family:   var(--Font-Family-Display);
  --Display-Small-Font-Size:     48px;
  --Display-Small-Font-Weight:   var(--Font-Weight-Display);
  --Display-Small-Line-Height:   60px;
  --Display-Small-Letter-Spacing: 0em;
  --Display-Small-Text-Transform: none;

  /* Header */
  --H1-Font-Family:   var(--Font-Family-Header);
  --H1-Font-Size:     48px;
  --H1-Font-Weight:   var(--Font-Weight-Header);
  --H1-Line-Height:   56px;
  --H1-Letter-Spacing: -0.01em;
  --H1-Text-Transform: none;
  --H2-Font-Family:   var(--Font-Family-Header);
  --H2-Font-Size:     40px;
  --H2-Font-Weight:   var(--Font-Weight-Header);
  --H2-Line-Height:   48px;
  --H2-Letter-Spacing: -0.01em;
  --H2-Text-Transform: none;
  --H3-Font-Family:   var(--Font-Family-Header);
  --H3-Font-Size:     32px;
  --H3-Font-Weight:   var(--Font-Weight-Header);
  --H3-Line-Height:   40px;
  --H3-Letter-Spacing: -0.01em;
  --H3-Text-Transform: none;
  --H4-Font-Family:   var(--Font-Family-Header);
  --H4-Font-Size:     24px;
  --H4-Font-Weight:   var(--Font-Weight-Header);
  --H4-Line-Height:   32px;
  --H4-Letter-Spacing: -0.01em;
  --H4-Text-Transform: none;
  --H5-Font-Family:   var(--Font-Family-Header);
  --H5-Font-Size:     20px;
  --H5-Font-Weight:   var(--Font-Weight-Header);
  --H5-Line-Height:   28px;
  --H5-Letter-Spacing: -0.01em;
  --H5-Text-Transform: none;
  --H6-Font-Family:   var(--Font-Family-Header);
  --H6-Font-Size:     18px;
  --H6-Font-Weight:   var(--Font-Weight-Header);
  --H6-Line-Height:   24px;
  --H6-Letter-Spacing: -0.01em;
  --H6-Text-Transform: none;

  /* Subtitle */
  --Subtitle-Small-Font-Family:   var(--Font-Family-Body);
  --Subtitle-Small-Font-Size:     14px;
  --Subtitle-Small-Font-Weight:   700;
  --Subtitle-Small-Line-Height:   21px;
  --Subtitle-Small-Letter-Spacing: 0em;
  --Subtitle-Small-Text-Transform: none;
  --Subtitle-Medium-Font-Family:   var(--Font-Family-Body);
  --Subtitle-Medium-Font-Size:     16px;
  --Subtitle-Medium-Font-Weight:   700;
  --Subtitle-Medium-Line-Height:   24px;
  --Subtitle-Medium-Letter-Spacing: 0em;
  --Subtitle-Medium-Text-Transform: none;
  --Subtitle-Large-Font-Family:   var(--Font-Family-Body);
  --Subtitle-Large-Font-Size:     18px;
  --Subtitle-Large-Font-Weight:   700;
  --Subtitle-Large-Line-Height:   27px;
  --Subtitle-Large-Letter-Spacing: 0em;
  --Subtitle-Large-Text-Transform: none;

  /* Body */
  --Body-Small-Font-Family:   var(--Font-Family-Body);
  --Body-Small-Font-Size:     14px;
  --Body-Small-Font-Weight:   var(--Font-Weight-Body);
  --Body-Small-Line-Height:   21px;
  --Body-Small-Letter-Spacing: 0em;
  --Body-Small-Text-Transform: none;
  --Body-Small-Semibold-Font-Weight: 600;
  --Body-Medium-Font-Family:   var(--Font-Family-Body);
  --Body-Medium-Font-Size:     16px;
  --Body-Medium-Font-Weight:   var(--Font-Weight-Body);
  --Body-Medium-Line-Height:   24px;
  --Body-Medium-Letter-Spacing: 0em;
  --Body-Medium-Text-Transform: none;
  --Body-Medium-Semibold-Font-Weight: 600;
  --Body-Large-Font-Family:   var(--Font-Family-Body);
  --Body-Large-Font-Size:     18px;
  --Body-Large-Font-Weight:   var(--Font-Weight-Body);
  --Body-Large-Line-Height:   27px;
  --Body-Large-Letter-Spacing: 0em;
  --Body-Large-Text-Transform: none;
  --Body-Large-Semibold-Font-Weight: 600;

  /* Caption */
  --Caption-Font-Family:   var(--Font-Family-Body);
  --Caption-Font-Size:     14px;
  --Caption-Font-Weight:   500;
  --Caption-Line-Height:   21px;
  --Caption-Letter-Spacing: 0.0071em;
  --Caption-Text-Transform: none;
  --Caption-Bold-Font-Weight: 700;
  --Caption-Paragraph-Spacing: 28px;

  /* Label */
  --Label-ExtraSmall-Font-Family:   var(--Font-Family-Body);
  --Label-ExtraSmall-Font-Size:     11px;
  --Label-ExtraSmall-Font-Weight:   600;
  --Label-ExtraSmall-Line-Height:   16.5px;
  --Label-ExtraSmall-Letter-Spacing: 0.0455em;
  --Label-ExtraSmall-Text-Transform: none;
  --Label-Small-Font-Family:   var(--Font-Family-Body);
  --Label-Small-Font-Size:     12.5px;
  --Label-Small-Font-Weight:   600;
  --Label-Small-Line-Height:   18.75px;
  --Label-Small-Letter-Spacing: 0.02em;
  --Label-Small-Text-Transform: none;
  --Label-Medium-Font-Family:   var(--Font-Family-Body);
  --Label-Medium-Font-Size:     16px;
  --Label-Medium-Font-Weight:   600;
  --Label-Medium-Line-Height:   24px;
  --Label-Medium-Letter-Spacing: 0em;
  --Label-Medium-Text-Transform: none;
  --Label-Medium-All-Caps-Font-Family:   var(--Font-Family-Body);
  --Label-Medium-All-Caps-Font-Size:     16px;
  --Label-Medium-All-Caps-Font-Weight:   600;
  --Label-Medium-All-Caps-Line-Height:   24px;
  --Label-Medium-All-Caps-Letter-Spacing: 0em;
  --Label-Medium-All-Caps-Text-Transform: uppercase;
  --Label-Large-Font-Family:   var(--Font-Family-Body);
  --Label-Large-Font-Size:     18px;
  --Label-Large-Font-Weight:   600;
  --Label-Large-Line-Height:   27px;
  --Label-Large-Letter-Spacing: 0em;
  --Label-Large-Text-Transform: none;

  /* Legal */
  --Legal-Font-Family:   var(--Font-Family-Body);
  --Legal-Font-Size:     10px;
  --Legal-Font-Weight:   400;
  --Legal-Line-Height:   15px;
  --Legal-Letter-Spacing: 0em;
  --Legal-Text-Transform: none;
  --Legal-Semibold-Font-Weight: 600;
  --Legal-Paragraph-Spacing: 20px;

  /* Eyebrow — Eyebrow label — uppercase and tracked. Sits above a heading. */
  --Eyebrow-Small-Font-Size:     12px;
  --Eyebrow-Small-Font-Weight:   600;
  --Eyebrow-Small-Line-Height:   18px;
  --Eyebrow-Small-Letter-Spacing: 0.06em;
  --Eyebrow-Small-Text-Transform: uppercase;
  --Overline-Small-Font-Size: var(--Eyebrow-Small-Font-Size);
  --Overline-Small-Font-Weight: var(--Eyebrow-Small-Font-Weight);
  --Overline-Small-Line-Height: var(--Eyebrow-Small-Line-Height);
  --Overline-Small-Letter-Spacing: var(--Eyebrow-Small-Letter-Spacing);
  --Overline-Small-Text-Transform: var(--Eyebrow-Small-Text-Transform);
  --Eyebrow-Medium-Font-Size:     13px;
  --Eyebrow-Medium-Font-Weight:   600;
  --Eyebrow-Medium-Line-Height:   19.5px;
  --Eyebrow-Medium-Letter-Spacing: 0.05em;
  --Eyebrow-Medium-Text-Transform: uppercase;
  --Overline-Medium-Font-Size: var(--Eyebrow-Medium-Font-Size);
  --Overline-Medium-Font-Weight: var(--Eyebrow-Medium-Font-Weight);
  --Overline-Medium-Line-Height: var(--Eyebrow-Medium-Line-Height);
  --Overline-Medium-Letter-Spacing: var(--Eyebrow-Medium-Letter-Spacing);
  --Overline-Medium-Text-Transform: var(--Eyebrow-Medium-Text-Transform);
  --Eyebrow-Large-Font-Size:     15px;
  --Eyebrow-Large-Font-Weight:   600;
  --Eyebrow-Large-Line-Height:   22.5px;
  --Eyebrow-Large-Letter-Spacing: 0.04em;
  --Eyebrow-Large-Text-Transform: uppercase;
  --Overline-Large-Font-Size: var(--Eyebrow-Large-Font-Size);
  --Overline-Large-Font-Weight: var(--Eyebrow-Large-Font-Weight);
  --Overline-Large-Line-Height: var(--Eyebrow-Large-Line-Height);
  --Overline-Large-Letter-Spacing: var(--Eyebrow-Large-Letter-Spacing);
  --Overline-Large-Text-Transform: var(--Eyebrow-Large-Text-Transform);

  /* Number */
  --Number-Small-Font-Family:   var(--Font-Family-Body);
  --Number-Small-Font-Size:     16px;
  --Number-Small-Font-Weight:   700;
  --Number-Small-Line-Height:   16px;
  --Number-Small-Letter-Spacing: 0em;
  --Number-Small-Text-Transform: none;
  --Number-Medium-Font-Family:   var(--Font-Family-Body);
  --Number-Medium-Font-Size:     28px;
  --Number-Medium-Font-Weight:   700;
  --Number-Medium-Line-Height:   28px;
  --Number-Medium-Letter-Spacing: 0em;
  --Number-Medium-Text-Transform: none;
  --Number-Large-Font-Family:   var(--Font-Family-Body);
  --Number-Large-Font-Size:     36px;
  --Number-Large-Font-Weight:   700;
  --Number-Large-Line-Height:   36px;
  --Number-Large-Letter-Spacing: 0em;
  --Number-Large-Text-Transform: none;

  /* Button */
  --Button-ExtraSmall-Font-Family:   var(--Font-Family-Body);
  --Button-ExtraSmall-Font-Size:     11px;
  --Button-ExtraSmall-Font-Weight:   600;
  --Button-ExtraSmall-Line-Height:   11px;
  --Button-ExtraSmall-Letter-Spacing: 0em;
  --Button-ExtraSmall-Text-Transform: none;
  --Button-Small-Font-Family:   var(--Font-Family-Body);
  --Button-Small-Font-Size:     14px;
  --Button-Small-Font-Weight:   600;
  --Button-Small-Line-Height:   14px;
  --Button-Small-Letter-Spacing: 0em;
  --Button-Small-Text-Transform: none;
  --Button-Standard-Font-Family:   var(--Font-Family-Body);
  --Button-Standard-Font-Size:     16px;
  --Button-Standard-Font-Weight:   600;
  --Button-Standard-Line-Height:   16px;
  --Button-Standard-Letter-Spacing: 0em;
  --Button-Standard-Text-Transform: none;
  --Button-Large-Font-Family:   var(--Font-Family-Body);
  --Button-Large-Font-Size:     24px;
  --Button-Large-Font-Weight:   600;
  --Button-Large-Line-Height:   24px;
  --Button-Large-Letter-Spacing: 0em;
  --Button-Large-Text-Transform: none;
  --Label-Font-Size: 14px;
  --Label-Line-Height: 20px;
  --Label-Letter-Spacing: 0px;
  --Label-Paragraph-Spacing: 4px;
  --Button-Font-Size: 16px;
  --Button-Line-Height: 20px;
  /* Medium bevel geometry — derived from THIS platform's button height, which
     is why it lives beside the height rather than in foundation.css. Each
     [data-platform] block below re-emits it for its own height. */
  --Button-Highlight-Offset-x: 0px;
  --Button-Highlight-Offset-y: 0px;
  --Button-Highlight-Blur-Radius: 0px;
  --Button-Highlight-Spread: 0px;
  --Button-Lowlight-Offset-x: 0px;
  --Button-Lowlight-Offset-y: 0px;
  --Button-Lowlight-Blur-Radius: 0px;
  --Button-Lowlight-Spread: 0px;
  /* Hit target. The SMALL button keeps its visual size on every platform; the
     lib wraps it in a box that grows to --Target using --Platform-Spacer, so
     the button looks identical while the tappable area meets the platform
     minimum. */
  --Target: 24px;
  --Platform-Spacer: 4px;
}

/* iOS Mobile */
[data-platform="IOS-Mobile"] {
  --Container-Padding: var(--Sizing-2);
  --Platform-Label: "IOS-Mobile";
  --Button-Height: 44px;
  --Min-Stack-Gap: 10px;
  --Button-Highlight-Offset-x: 0px;
  --Button-Highlight-Offset-y: 0px;
  --Button-Highlight-Blur-Radius: 0px;
  --Button-Highlight-Spread: 0px;
  --Button-Lowlight-Offset-x: 0px;
  --Button-Lowlight-Offset-y: 0px;
  --Button-Lowlight-Blur-Radius: 0px;
  --Button-Lowlight-Spread: 0px;
  --Target: 44px;
  --Platform-Spacer: 10px;
  --Body-Font-Size: 16px;
  --Body-Letter-Spacing: -.5px;
  --Body-Line-Height: 24px;
  --Body-Paragraph-Spacing: 16px;
  --H1-Font-Size: 32px;
  --H1-Line-Height: 40px;
  --H1-Letter-Spacing: -1px;
  --H1-Paragraph-Spacing: 24px;
  --H2-Font-Size: 28px;
  --H2-Line-Height: 32px;
  --H2-Letter-Spacing: -.5px;
  --H2-Paragraph-Spacing: 20px;
  --H3-Font-Size: 24px;
  --H3-Line-Height: 32px;
  --H3-Letter-Spacing: -.5px;
  --H3-Paragraph-Spacing: 16px;
  --H4-Font-Size: 20px;
  --H4-Line-Height: 28px;
  --H4-Letter-Spacing: 0px;
  --H4-Paragraph-Spacing: 12px;
  --H5-Font-Size: 18px;
  --H5-Line-Height: 26px;
  --H5-Letter-Spacing: 0px;
  --H5-Paragraph-Spacing: 12px;
  --H6-Font-Size: 16px;
  --H6-Line-Height: 24px;
  --H6-Letter-Spacing: .5px;
  --H6-Paragraph-Spacing: 8px;
  --Label-Font-Size: 13px;
  --Label-Line-Height: 18px;
  --Label-Letter-Spacing: 0px;
  --Label-Paragraph-Spacing: 4px;
  --Button-Font-Size: 16px;
  --Button-Line-Height: 20px;
}

/* iOS Tablet */
[data-platform="IOS-Tablet"] {
  --Container-Padding: var(--Sizing-3);
  --Platform-Label: "IOS-Tablet";
  --Button-Height: 44px;
  --Min-Stack-Gap: 10px;
  --Button-Highlight-Offset-x: 0px;
  --Button-Highlight-Offset-y: 0px;
  --Button-Highlight-Blur-Radius: 0px;
  --Button-Highlight-Spread: 0px;
  --Button-Lowlight-Offset-x: 0px;
  --Button-Lowlight-Offset-y: 0px;
  --Button-Lowlight-Blur-Radius: 0px;
  --Button-Lowlight-Spread: 0px;
  --Target: 44px;
  --Platform-Spacer: 10px;
  --Body-Font-Size: 17px;
  --Body-Letter-Spacing: -.5px;
  --Body-Line-Height: 25.5px;
  --Body-Paragraph-Spacing: 16px;
  --H1-Font-Size: 40px;
  --H1-Line-Height: 48px;
  --H1-Letter-Spacing: -1.5px;
  --H1-Paragraph-Spacing: 32px;
  --H2-Font-Size: 32px;
  --H2-Line-Height: 40px;
  --H2-Letter-Spacing: -1px;
  --H2-Paragraph-Spacing: 24px;
  --H3-Font-Size: 28px;
  --H3-Line-Height: 36px;
  --H3-Letter-Spacing: -.5px;
  --H3-Paragraph-Spacing: 20px;
  --H4-Font-Size: 24px;
  --H4-Line-Height: 32px;
  --H4-Letter-Spacing: -.5px;
  --H4-Paragraph-Spacing: 16px;
  --H5-Font-Size: 20px;
  --H5-Line-Height: 28px;
  --H5-Letter-Spacing: 0px;
  --H5-Paragraph-Spacing: 12px;
  --H6-Font-Size: 18px;
  --H6-Line-Height: 26px;
  --H6-Letter-Spacing: 0px;
  --H6-Paragraph-Spacing: 12px;
  --Label-Font-Size: 14px;
  --Label-Line-Height: 20px;
  --Label-Letter-Spacing: 0px;
  --Label-Paragraph-Spacing: 4px;
  --Button-Font-Size: 17px;
  --Button-Line-Height: 21px;
}

/* Android */
[data-platform="Android"] {
  --Container-Padding: var(--Sizing-2);
  --Platform-Label: "Android";
  --Button-Height: 48px;
  --Min-Stack-Gap: 12px;
  --Button-Highlight-Offset-x: 0px;
  --Button-Highlight-Offset-y: 0px;
  --Button-Highlight-Blur-Radius: 0px;
  --Button-Highlight-Spread: 0px;
  --Button-Lowlight-Offset-x: 0px;
  --Button-Lowlight-Offset-y: 0px;
  --Button-Lowlight-Blur-Radius: 0px;
  --Button-Lowlight-Spread: 0px;
  --Target: 48px;
  --Platform-Spacer: 12px;
  --Body-Font-Size: 16px;
  --Body-Line-Height: 24px;
  --Body-Letter-Spacing: .5px;
  --Body-Paragraph-Spacing: 16px;
  --H1-Font-Size: 36px;
  --H1-Line-Height: 40px;
  --H1-Letter-Spacing: -.5px;
  --H1-Paragraph-Spacing: 20px;
  --H2-Font-Size: 28px;
  --H2-Line-Height: 36px;
  --H2-Letter-Spacing: -.5px;
  --H2-Paragraph-Spacing: 20px;
  --H3-Font-Size: 24px;
  --H3-Line-Height: 32px;
  --H3-Letter-Spacing: 0px;
  --H3-Paragraph-Spacing: 16px;
  --H4-Font-Size: 20px;
  --H4-Line-Height: 28px;
  --H4-Letter-Spacing: 0px;
  --H4-Paragraph-Spacing: 12px;
  --H5-Font-Size: 18px;
  --H5-Line-Height: 26px;
  --H5-Letter-Spacing: 0px;
  --H5-Paragraph-Spacing: 12px;
  --H6-Font-Size: 16px;
  --H6-Line-Height: 24px;
  --H6-Letter-Spacing: .5px;
  --H6-Paragraph-Spacing: 8px;
  --Label-Font-Size: 13px;
  --Label-Line-Height: 18px;
  --Label-Letter-Spacing: 0px;
  --Label-Paragraph-Spacing: 4px;
  --Button-Font-Size: 16px;
  --Button-Line-Height: 20px;
}

/* Decorative Font Application */
/* In decorative mode, eyebrows swap onto the Display face. Re-pointing the
   face token is all it takes — every style wearing that face follows, because
   each one's --<style>-Font-Family is relative to it. */

[data-surface="Surface"] [data-decorative],
[data-surface="Surface-Dim"] [data-decorative],
[data-surface="Surface-Dimmest"] [data-decorative],
[data-surface="Surface-Bright"] [data-decorative] {
  --Font-Family-Header: var(--Set-Font-Family-Header);
  --Font-Family-Header-Weight: var(--Set-Font-Family-Header-Weight);
  --Font-Family-Eyebrow: var(--Font-Family-Display);
}

/* Explicit decorative variants — always available regardless of mode */
[data-typography="decorative-header"] {
  font-family: var(--Font-Family-Header);
  font-weight: var(--Set-Font-Family-Header-Weight);
}
[data-typography="decorative-overline"] {
  font-family: var(--Font-Family-Display);
}

/* Cognitive Accessibility Overrides */
[data-cognitive="Dyslexia"] {
  --Cognitive-Multiplier: 1.5;
  --Body-Font-Family: "OpenDyslexic";
  --Body-Font-Weight: 400;
  --Body-Semibold-Font-Weight: 700;
  --Body-Bold-Font-Weight: 700;
}

[data-cognitive="ADHD"] {
  --Cognitive-Multiplier: 1.5;
}