/*
 * !!! DO NOT EDIT !!!
 * Generated by `npm run tokens` from projects/components/src/lib/tokens/.
 * Change the TypeScript theme and regenerate (ADR-013).
 *
 * The static marketing site (marketing/, ADR-018) reads these by role, exactly
 * as the components do: var(--colorBrandBackground) for a fill,
 * var(--colorNeutralForeground2) for soft text. Never copy a hex value into
 * saturdaze.css.
 */

:root {
  --borderRadiusNone: 0;
  --borderRadiusSmall: 8px;
  --borderRadiusMedium: 12px;
  --borderRadiusLarge: 16px;
  --borderRadiusXLarge: 22px;
  --borderRadiusCircular: 999px;
  --fontSizeBase200: 0.75rem;
  --fontSizeBase300: 0.8125rem;
  --fontSizeBase350: 0.875rem;
  --fontSizeBase400: 0.9375rem;
  --fontSizeBase500: 1.0625rem;
  --fontSizeBase600: 1.25rem;
  --fontSizeHero700: 1.625rem;
  --fontSizeHero800: 2.125rem;
  --lineHeightNone: 1;
  --lineHeightTight: 1.2;
  --lineHeightSnug: 1.35;
  --lineHeightNormal: 1.5;
  --lineHeightRelaxed: 1.65;
  --fontFamilyBase:
    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif;
  --fontFamilyMonospace: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fontWeightRegular: 400;
  --fontWeightMedium: 500;
  --fontWeightSemibold: 600;
  --fontWeightBold: 700;
  --strokeWidthThin: 1px;
  --strokeWidthThick: 2px;
  --spacingHorizontalNone: 0;
  --spacingHorizontalXXS: 2px;
  --spacingHorizontalXS: 4px;
  --spacingHorizontalSNudge: 6px;
  --spacingHorizontalS: 8px;
  --spacingHorizontalMNudge: 10px;
  --spacingHorizontalM: 12px;
  --spacingHorizontalL: 16px;
  --spacingHorizontalXL: 20px;
  --spacingHorizontalXXL: 24px;
  --spacingHorizontalXXXL: 32px;
  --spacingHorizontalXXXXL: 40px;
  --spacingHorizontalXXXXXL: 56px;
  --spacingVerticalNone: 0;
  --spacingVerticalXXS: 2px;
  --spacingVerticalXS: 4px;
  --spacingVerticalSNudge: 6px;
  --spacingVerticalS: 8px;
  --spacingVerticalMNudge: 10px;
  --spacingVerticalM: 12px;
  --spacingVerticalL: 16px;
  --spacingVerticalXL: 20px;
  --spacingVerticalXXL: 24px;
  --spacingVerticalXXXL: 32px;
  --spacingVerticalXXXXL: 40px;
  --spacingVerticalXXXXXL: 56px;
  --durationFast: 120ms;
  --durationNormal: 220ms;
  --durationShimmer: 1400ms;
  --durationSpin: 900ms;
  --curveEasyEase: cubic-bezier(0.2, 0.7, 0.2, 1);
  --layoutContentMaxWidth: 1120px;
  --layoutStackMaxWidth: 720px;
  --layoutGutter: 16px;
  --layoutTopBarHeight: 64px;
  --layoutBottomNavHeight: 60px;
  --layoutSpacePage: 64px;
  --zIndexSticky: 5;
  --zIndexTopBar: 20;
  --zIndexBottomNav: 30;
  --zIndexTooltip: 70;
  --colorNeutralForeground1: #1f2937;
  --colorNeutralForeground2: #5b6270;
  --colorNeutralForeground3: #636a77;
  --colorNeutralForegroundDisabled: #9ca3af;
  --colorNeutralForegroundOnBrand: #ffffff;
  --colorNeutralForegroundInverted: #ffffff;
  --colorNeutralForegroundStaticInverted: #ffffff;
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground2: #faf7f2;
  --colorNeutralBackground3: #f3efe8;
  --colorNeutralBackgroundInverted: #1f2937;
  --colorBackgroundOverlay: rgba(31, 41, 55, 0.4);
  --colorBackgroundOverlayStrong: rgba(31, 41, 55, 0.72);
  --colorNeutralStencil2Alpha: rgba(255, 255, 255, 0.6);
  --colorNeutralStroke1: rgba(31, 41, 55, 0.16);
  --colorNeutralStroke2: rgba(31, 41, 55, 0.08);
  --colorNeutralStrokeAccessible: #80868f;
  --colorStrokeFocus2: #a04b2c;
  --colorBrandForeground1: #e07856;
  --colorBrandForeground2: #a04b2c;
  --colorBrandBackground: #bf5130;
  --colorBrandBackgroundHover: color-mix(in srgb, #bf5130 94%, #000);
  --colorBrandBackgroundStatic: #e07856;
  --colorBrandBackground2: #fbe7de;
  --colorBrandBackgroundGradient:
    radial-gradient(80% 60% at 0% 0%, #fbe7de 0%, transparent 60%),
    radial-gradient(80% 60% at 100% 0%, #fbebc4 0%, transparent 60%);
  --colorBrandStroke1: #e07856;
  --colorBrandStroke2: #fbe7de;
  --colorNeutralShadowAmbient: rgba(31, 41, 55, 0.04);
  --colorNeutralShadowKey: rgba(31, 41, 55, 0.06);
  --colorNeutralShadowKeyDarker: rgba(31, 41, 55, 0.12);
  --colorPaletteSunBackground1: #fbebc4;
  --colorPaletteSunBackground3: #f4c969;
  --colorPaletteSunForeground1: #8a6212;
  --colorPaletteSunForeground3: #b07f14;
  --colorPaletteSunBorder1: #fbebc4;
  --colorPaletteSunBorderActive: #f4c969;
  --colorPaletteSkyBackground1: #dce9f1;
  --colorPaletteSkyBackground3: #bfd9e8;
  --colorPaletteSkyForeground1: #2c5f7a;
  --colorPaletteSkyForeground3: #bfd9e8;
  --colorPaletteSkyBorder1: #dce9f1;
  --colorPaletteSkyBorderActive: #bfd9e8;
  --colorPaletteLeafBackground1: #ddeeda;
  --colorPaletteLeafBackground3: #a9c9a4;
  --colorPaletteLeafForeground1: #256b51;
  --colorPaletteLeafForeground3: #a9c9a4;
  --colorPaletteLeafBorder1: #ddeeda;
  --colorPaletteLeafBorderActive: #a9c9a4;
  --colorPaletteIndoorBackground1: #eadff4;
  --colorPaletteIndoorBackground3: #c9b6e0;
  --colorPaletteIndoorForeground1: #5a3b82;
  --colorPaletteIndoorForeground3: #c9b6e0;
  --colorPaletteIndoorBorder1: #eadff4;
  --colorPaletteIndoorBorderActive: #c9b6e0;
  --colorStatusSuccessBackground1: #deede5;
  --colorStatusSuccessBackground3: #2d7d5f;
  --colorStatusSuccessForeground1: #256b51;
  --colorStatusSuccessForeground3: #2d7d5f;
  --colorStatusSuccessBorder1: #deede5;
  --colorStatusSuccessBorderActive: #2d7d5f;
  --colorStatusSuccessForegroundInverted: #ffffff;
  --colorStatusDangerBackground1: #fadfd6;
  --colorStatusDangerBackground3: #ae2b2b;
  --colorStatusDangerForeground1: #8f3d27;
  --colorStatusDangerForeground3: #ae2b2b;
  --colorStatusDangerBorder1: #fadfd6;
  --colorStatusDangerBorderActive: #ae2b2b;
  --colorStatusDangerForegroundInverted: #ffffff;
  --shadow4: 0 1px 2px rgba(31, 41, 55, 0.04), 0 2px 6px rgba(31, 41, 55, 0.04);
  --shadow16: 0 4px 10px rgba(31, 41, 55, 0.06), 0 10px 24px rgba(31, 41, 55, 0.06);
  --shadow28: 0 20px 40px rgba(31, 41, 55, 0.12);
}

@media (min-width: 45rem) {
  :root {
    --layoutGutter: 24px;
  }
}

@media (min-width: 64rem) {
  :root {
    --layoutGutter: 32px;
    --fontSizeHero800: 2.5rem;
    --fontSizeHero700: 1.875rem;
    --fontSizeBase600: 1.375rem;
  }
}

@media (max-width: 23.6875rem) {
  :root {
    --fontSizeHero800: 1.875rem;
    --fontSizeHero700: 1.5rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --colorNeutralForeground1: #f2ede6;
    --colorNeutralForeground2: #cdc4b8;
    --colorNeutralForeground3: #aea597;
    --colorNeutralForegroundDisabled: #6e665d;
    --colorNeutralForegroundOnBrand: #2a160e;
    --colorNeutralForegroundInverted: #201c18;
    --colorNeutralBackground1: #201c18;
    --colorNeutralBackground2: #161310;
    --colorNeutralBackground3: #342e28;
    --colorNeutralBackgroundInverted: #f2ede6;
    --colorBackgroundOverlay: rgba(0, 0, 0, 0.6);
    --colorBackgroundOverlayStrong: rgba(0, 0, 0, 0.72);
    --colorNeutralStencil2Alpha: rgba(255, 255, 255, 0.06);
    --colorNeutralStroke1: rgba(242, 237, 230, 0.18);
    --colorNeutralStroke2: rgba(242, 237, 230, 0.1);
    --colorNeutralStrokeAccessible: #8f867b;
    --colorStrokeFocus2: #f59c7c;
    --colorBrandForeground1: #f59c7c;
    --colorBrandForeground2: #f6cbb9;
    --colorBrandBackground: #f59c7c;
    --colorBrandBackgroundHover: #f6cbb9;
    --colorBrandBackground2: #43251a;
    --colorBrandBackgroundGradient:
      radial-gradient(80% 60% at 0% 0%, #43251a 0%, transparent 60%),
      radial-gradient(80% 60% at 100% 0%, #3a2d14 0%, transparent 60%);
    --colorBrandStroke1: #f59c7c;
    --colorBrandStroke2: #43251a;
    --colorNeutralShadowAmbient: rgba(0, 0, 0, 0.3);
    --colorNeutralShadowKey: rgba(0, 0, 0, 0.4);
    --colorNeutralShadowKeyDarker: rgba(0, 0, 0, 0.55);
    --colorPaletteSunBackground1: #3a2d14;
    --colorPaletteSunForeground1: #f4cf7a;
    --colorPaletteSunForeground3: #f4c969;
    --colorPaletteSunBorder1: #3a2d14;
    --colorPaletteSkyBackground1: #1b3140;
    --colorPaletteSkyBackground3: #9ccbe4;
    --colorPaletteSkyForeground1: #9ccbe4;
    --colorPaletteSkyForeground3: #9ccbe4;
    --colorPaletteSkyBorder1: #1b3140;
    --colorPaletteSkyBorderActive: #9ccbe4;
    --colorPaletteLeafBackground1: #1f3522;
    --colorPaletteLeafBackground3: #a6d8a0;
    --colorPaletteLeafForeground1: #a6d8a0;
    --colorPaletteLeafForeground3: #a6d8a0;
    --colorPaletteLeafBorder1: #1f3522;
    --colorPaletteLeafBorderActive: #a6d8a0;
    --colorPaletteIndoorBackground1: #2f2545;
    --colorPaletteIndoorBackground3: #cdb8ee;
    --colorPaletteIndoorForeground1: #cdb8ee;
    --colorPaletteIndoorForeground3: #cdb8ee;
    --colorPaletteIndoorBorder1: #2f2545;
    --colorPaletteIndoorBorderActive: #cdb8ee;
    --colorStatusSuccessBackground1: #1a3629;
    --colorStatusSuccessBackground3: #7cc4a0;
    --colorStatusSuccessForeground1: #7cc4a0;
    --colorStatusSuccessForeground3: #7cc4a0;
    --colorStatusSuccessBorder1: #1a3629;
    --colorStatusSuccessBorderActive: #7cc4a0;
    --colorStatusSuccessForegroundInverted: #0c2219;
    --colorStatusDangerBackground1: #44201a;
    --colorStatusDangerBackground3: #ff8f8a;
    --colorStatusDangerForeground1: #ffa19b;
    --colorStatusDangerForeground3: #ff8f8a;
    --colorStatusDangerBorder1: #44201a;
    --colorStatusDangerBorderActive: #ff8f8a;
    --colorStatusDangerForegroundInverted: #2a0f09;
    --shadow4: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow16: 0 4px 10px rgba(0, 0, 0, 0.4), 0 10px 24px rgba(0, 0, 0, 0.4);
    --shadow28: 0 20px 40px rgba(0, 0, 0, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --durationFast: 0.01ms;
    --durationNormal: 0.01ms;
    --durationShimmer: 0.01ms;
  }
}