/* ════════════════════════════════════════════════════════════════════
   W9 STUDIO — CANONICAL FLUENT 2 DESIGN TOKENS (dark, matte-black)
   GENERATED FILE — DO NOT HAND-EDIT.
   Source of truth: packages/w9-design-system/tokens.json (v1.0.0).
   Regenerate with: node packages/w9-design-system/build.mjs
   Brand: Fluent 2 token names; brand override = Studio W9 orange #FF4500.
   Every page links this file; components must consume var(--token), never raw hex.
   ════════════════════════════════════════════════════════════════════ */
:root {
  --colorNeutralBackground1: #292929;
  --colorNeutralBackground1Hover: #3d3d3d;
  --colorNeutralBackground1Pressed: #1f1f1f;
  --colorNeutralBackground2: #1f1f1f;
  --colorNeutralBackground3: #141414;
  --colorNeutralBackground4: #0a0a0a;
  --colorNeutralBackground5: #070707;
  --colorNeutralBackground6: #333333;
  --colorNeutralBackgroundStatic: #3d3d3d;
  --colorNeutralBackgroundAlpha: rgba(26,26,26,0.5);
  --colorNeutralBackgroundAlpha2: rgba(31,31,31,0.7);
  --colorSubtleBackgroundHover: #383838;
  --colorSubtleBackgroundPressed: #2e2e2e;
  --colorBackgroundOverlay: rgba(0,0,0,0.5);
  --colorNeutralForeground1: #ffffff;
  --colorNeutralForeground2: #d6d6d6;
  --colorNeutralForeground3: #adadad;
  --colorNeutralForeground4: #999999;
  --colorNeutralForegroundDisabled: #5c5c5c;
  --colorNeutralForegroundOnBrand: #ffffff;
  --colorNeutralForegroundInverted: #242424;
  --colorBrandBackground: #e03d00;
  --colorBrandBackgroundHover: #FF4500;
  --colorBrandBackgroundPressed: #c23500;
  --colorBrandBackgroundStatic: #FF4500;
  --colorBrandBackground2: rgba(255,69,0,0.08);
  --colorBrandForeground1: #FF4500;
  --colorBrandForeground2: #ff6a33;
  --colorCompoundBrandBackground: #FF4500;
  --colorCompoundBrandForeground1: #FF4500;
  --colorCompoundBrandStroke: #FF4500;
  --colorBrandStroke1: #FF4500;
  --colorStatusSuccessBackground3: #107c10;
  --colorStatusSuccessForeground1: #4caf50;
  --colorStatusSuccessForeground2: #d8f6d3;
  --colorStatusDangerForeground1: #ff8f68;
  --colorNeutralCardBackground: #333333;
  --colorNeutralCardBackgroundHover: #3d3d3d;
  --colorNeutralCardBackgroundPressed: #2e2e2e;
  --colorNeutralStroke1: #666666;
  --colorNeutralStroke2: #525252;
  --colorNeutralStroke3: #3d3d3d;
  --colorNeutralStrokeAccessible: #adadad;
  --colorNeutralStrokeDisabled: #424242;
  --colorStrokeFocus1: #000000;
  --colorStrokeFocus2: #ffffff;
  --colorStatusDangerBackground1: #3f1011;
  --colorStatusWarningBackground1: #3d3000;
  --colorStatusWarningForeground1: #f2c661;
  --colorStatusSuccessBackground1: #0d2e0d;

  --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;
  --lineHeightHero1000: 92px;
  --fontWeightRegular: 400;
  --fontWeightMedium: 500;
  --fontWeightSemibold: 600;
  --fontWeightBold: 700;
  --spacingHorizontalXXS: 2px;
  --spacingHorizontalXS: 4px;
  --spacingHorizontalSNudge: 6px;
  --spacingHorizontalS: 8px;
  --spacingHorizontalMNudge: 10px;
  --spacingHorizontalM: 12px;
  --spacingHorizontalL: 16px;
  --spacingHorizontalXL: 20px;
  --spacingHorizontalXXL: 24px;
  --spacingHorizontalXXXL: 32px;
  --borderRadiusNone: 0;
  --borderRadiusSmall: 2px;
  --borderRadiusMedium: 4px;
  --borderRadiusLarge: 6px;
  --borderRadiusXLarge: 8px;
  --borderRadius2XLarge: 12px;
  --borderRadius3XLarge: 16px;
  --borderRadiusCircular: 10000px;
  --strokeWidthThin: 1px;
  --strokeWidthThick: 2px;
  --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);
  --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);
  --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);
  --curveKinetic: cubic-bezier(0.16, 1, 0.3, 1);
  --curveDramatic: cubic-bezier(0.65, 0, 0.35, 1);
  --curveSnap: cubic-bezier(0.22, 1, 0.36, 1);
  --maxContentWidth: 1280px;
  --navHeight: 48px;
  --sectionPadding: clamp(64px, 8vw, 120px);
}

/* ── Light client-portal variant ──────────────────────────────────────
   Opt in per page with <html data-w9-theme="light">. Matte-black dark is
   the default public experience; light keeps #FF4500 accents
   (body-size brand text darkened for contrast). */
[data-w9-theme="light"] {
  --colorNeutralBackground1: #ffffff;
  --colorNeutralBackground1Hover: #f5f5f5;
  --colorNeutralBackground1Pressed: #e0e0e0;
  --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralBackground4: #f0f0f0;
  --colorNeutralBackground5: #ebebeb;
  --colorNeutralBackground6: #e6e6e6;
  --colorNeutralBackgroundStatic: #333333;
  --colorNeutralBackgroundAlpha: rgba(255,255,255,0.5);
  --colorNeutralBackgroundAlpha2: rgba(255,255,255,0.8);
  --colorSubtleBackgroundHover: #f5f5f5;
  --colorSubtleBackgroundPressed: #e0e0e0;
  --colorBackgroundOverlay: rgba(0,0,0,0.4);
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground3: #616161;
  --colorNeutralForeground4: #707070;
  --colorNeutralForegroundDisabled: #bdbdbd;
  --colorNeutralForegroundOnBrand: #ffffff;
  --colorNeutralForegroundInverted: #ffffff;
  --colorBrandBackground: #FF4500;
  --colorBrandBackgroundHover: #e63e00;
  --colorBrandBackgroundPressed: #c23500;
  --colorBrandBackgroundStatic: #FF4500;
  --colorBrandBackground2: rgba(255,69,0,0.08);
  --colorBrandForeground1: #c23500;
  --colorBrandForeground2: #a12c00;
  --colorCompoundBrandBackground: #FF4500;
  --colorCompoundBrandForeground1: #c23500;
  --colorCompoundBrandStroke: #FF4500;
  --colorBrandStroke1: #FF4500;
  --colorStatusSuccessBackground3: #107c10;
  --colorStatusSuccessForeground1: #107c10;
  --colorStatusSuccessForeground2: #0e700e;
  --colorStatusDangerForeground1: #b10e1c;
  --colorStatusDangerBackground1: #fde7e9;
  --colorStatusWarningBackground1: #fff4ce;
  --colorStatusWarningForeground1: #835b00;
  --colorStatusSuccessBackground1: #dff6dd;
  --colorNeutralCardBackground: #fafafa;
  --colorNeutralCardBackgroundHover: #f5f5f5;
  --colorNeutralCardBackgroundPressed: #e0e0e0;
  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke2: #e0e0e0;
  --colorNeutralStroke3: #f0f0f0;
  --colorNeutralStrokeAccessible: #616161;
  --colorNeutralStrokeDisabled: #e0e0e0;
  --colorStrokeFocus1: #ffffff;
  --colorStrokeFocus2: #000000;
}