@windstream/react-shared-components 0.0.97 → 0.0.99

package/src/styles/globals.css

@@ -1,343 +1,343 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-/* Material Symbols Font */
-@font-face {
-  font-family: "Material Symbols Rounded";
-  src: url("/material_symbols/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
-    format("woff2");
-  font-weight: 100 700;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* Custom CSS variables for fonts */
-/* default theme Residential */
-:root {
-  --win-site-font:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-
-  /* Color tokens - Border */
-  --color-border: #e6e6e6;
-  --color-border-brand: #24a76a;
-  --color-border-critical: #d40000;
-  --color-border-critical-secondary: #f0a7a7;
-  --color-border-disabled: #f2f2f4;
-  --color-border-focus: #24a76a;
-  --color-border-focus-inverse: #00002d;
-  --color-border-focus-secondary: #00002d;
-  --color-border-hover: #cecece;
-  --color-border-info: #cecece;
-  --color-border-inverse: #ffffff;
-  --color-border-secondary: #f2f2f4;
-  --color-border-secondary-on-bg-fill: #949494;
-  --color-border-success: #24a76a;
-  --color-border-tertiary: #cecece;
-  --color-border-accent: #f5ff1e;
-
-  /* Color tokens - Icon */
-  --color-icon-brand: #24a76a;
-  --color-icon-brand-accent: #f5ff1e;
-  --color-icon-critical: #d40000;
-  --color-icon: #00002d;
-  --color-icon-info: #757575;
-  --color-icon-inverse: #ffffff;
-  --color-icon-inverse-secondary: #e6e6e6;
-  --color-icon-secondary: #757575;
-  --color-icon-success: #24a76a;
-  --color-icon-disabled: #cecece;
-
-  /* Color tokens - Checkbox */
-  --color-checkbox-bg-surface-disabled: #f7f7f8;
-  --color-checkbox-bg-surface-selected-disabled: #e6e6e6;
-  --color-checkbox-icon-disabled: #ffffff;
-
-  /* Color tokens - Input */
-  --color-input-bg-surface: #ffffff;
-  --color-input-bg-surface-active: #f2f2f4;
-  --color-input-bg-surface-disabled: #f7f7f8;
-  --color-input-bg-surface-hover: #f7f7f8;
-  --color-input-border: #cecece;
-  --color-input-border-critical: #d40000;
-  --color-input-border-hover: #00002d;
-  --color-input-border-selected: #24a76a;
-  --color-input-icon-placeholder: #757575;
-  --color-input-text-placeholder: #5e5e5e;
-
-  /* Color tokens - Nav */
-  --color-nav-bg: #ffffff;
-  --color-nav-bg-surface: #fbfbfc;
-  --color-nav-bg-surface-active: #f2f2f4;
-  --color-nav-bg-surface-hover: #f7f7f8;
-  --color-nav-bg-surface-selected: #f2f2f4;
-
-  /* Color tokens - Radio */
-  --color-radio-button-bg-surface-disabled: #f7f7f8;
-  --color-radio-button-bg-surface-selected-disabled: #e6e6e6;
-  --color-radio-button-icon-disabled: #f7f7f8;
-
-  /* Color tokens - Scrim */
-  --color-scrim-bg-modal: rgba(0, 0, 0, 0.5);
-  --color-scrim-bg-video-lightbox: rgba(0, 0, 0, 0.8);
-
-  /* Color tokens - Skeleton */
-  --color-skeleton-bg-start: #cecece;
-  --color-skeleton-bg-end: #e6e6e6;
-
-  /* Color tokens - Toggle */
-  --color-toggle-bg-fill: #ffffff;
-  --color-toggle-bg-surface-active: #24a76a;
-  --color-toggle-bg-surface-inactive: #949494;
-  --color-toggle-bg-surface-disabled: #e6e6e6;
-
-  /* Color tokens - Tooltip */
-  --color-tooltip-bg: #757575;
-
-  /* Color tokens - Background */
-  --color-bg: #ffffff;
-  --color-bg-fill-brand: #24a76a;
-  --color-bg-fill-brand-accent: #f5ff1e;
-  --color-bg-fill-brand-active: #209a61;
-  --color-bg-fill-brand-disabled: #cecece;
-  --color-bg-fill-brand-hover: #45c187;
-  --color-bg-fill-brand-selected: #24a76a;
-  --color-bg-fill-brand-supporting: #07b2e2;
-  --color-bg-fill-brand-tertiary: #931d69;
-  --color-bg-fill-translucent: rgba(255, 255, 255, 0.5);
-  --color-bg-fill-critical: #d40000;
-  --color-bg-fill-critical-secondary: #fdf5f5;
-  --color-bg-fill-info: #f2f2f4;
-  --color-bg-fill-inverse: #00002d;
-  --color-bg-fill-inverse-active: #00002d;
-  --color-bg-fill-inverse-disabled: #cecece;
-  --color-bg-fill-inverse-hover: #191a54;
-  --color-bg-fill-inverse-selected: #00002d;
-  --color-bg-fill-secondary: #ffffff;
-  --color-bg-fill-secondary-active: #f2f2f4;
-  --color-bg-fill-secondary-hover: #fbfbfc;
-  --color-bg-fill-success: #24a76a;
-  --color-bg-fill-success-secondary: #f4fbf8;
-  --color-bg-fill-surface-brand: #f4fbf8;
-  --color-bg-fill-surface-inverse: #00002d;
-  --color-bg-fill-surface-success: #d3f2e3;
-  --color-bg-inverse: #00002d;
-  --color-bg-surface: #ffffff;
-  --color-bg-surface-active: #f2f2f4;
-  --color-bg-surface-brand: #f4fbf8;
-  --color-bg-surface-disabled: #f2f2f4;
-  --color-bg-surface-hover: #f7f7f8;
-  --color-bg-surface-info: #f7f7f8;
-  --color-bg-surface-inverse: #191a54;
-  --color-bg-surface-secondary: #fbfbfc;
-  --color-bg-surface-secondary-active: #e6e6e6;
-  --color-bg-surface-secondary-hover: #f2f2f4;
-  --color-bg-surface-secondary-selected: #e6e6e6;
-  --color-bg-surface-selected: #f7f7f8;
-  --color-bg-surface-success: #d3f2e3;
-  --color-bg-surface-tertiary: #f7f7f8;
-  --color-bg-surface-tertiary-active: #e6e6e6;
-  --color-bg-surface-tertiary-hover: #f2f2f4;
-  --color-bg-surface-transparent: rgba(0, 0, 0, 0);
-
-  /* Color tokens - Text */
-  --color-text: #00002d;
-  --color-text-brand: #24a76a;
-  --color-text-brand-accent-on-bg-fill: #00002d;
-  --color-text-brand-hover: #1b8352;
-  --color-text-brand-on-bg-fill: #ffffff;
-  --color-text-brand-supporting-on-bg-fill: #00002d;
-  --color-text-brand-tertiary-on-bg-fill: #ffffff;
-  --color-text-critical: #d40000;
-  --color-text-critical-on-bg-inverse: #fdf5f5;
-  --color-text-disabled: #757575;
-  --color-text-info: #757575;
-  --color-text-inverse: #ffffff;
-  --color-text-link: #00002d;
-  --color-text-link-active: #00002d;
-  --color-text-link-hover: #00002d;
-  --color-text-link-inverse: #ffffff;
-  --color-text-secondary: #464646;
-  --color-text-success: #1b8352;
-  --color-text-accent-on-bg-inverse: #f5ff1e;
-
-  /* Border radius tokens - Default (Residential) */
-  --border-radius-2-5: 10px;
-  --border-radius-3-5: 14px;
-  --border-radius-lg: 0.5rem;
-  --border-radius-xl: 0.75rem;
-  --border-radius-2xl: 1rem;
-  --border-radius-2-5xl: 1.25rem;
-  --border-radius-4xl: 2rem;
-  --border-radius-5xl: 2.5rem;
-
-  /* Border radius tokens - rebrand */
-  /* Card */
-  --border-radius-card-default: 1.25rem; /* 20px */
-  --border-radius-card-sm: 1rem; /* 16px */
-  --border-radius-card-lg: 1.5rem; /* 24px */
-
-  /* Modal */
-  --border-radius-modal-default: 1rem; /* 16px */
-  --border-radius-modal-sm: 0.5rem; /* 8px */
-  --border-radius-modal-lg: 1.5rem; /* 24px */
-
-  /* Surface */
-  --border-radius-surface-default: 1.5rem; /* 24px */
-  --border-radius-surface-xs: 0.5rem; /* 8px */
-  --border-radius-surface-sm: 1rem; /* 16px */
-  --border-radius-surface-lg: 2.5rem; /* 40px */
-  --border-radius-surface-round: 624.9375rem; /* 9999px */
-
-  /* Button */
-  --border-radius-button-default: 1rem; /* 16px */
-  --border-radius-button-sm: 0.5rem; /* 8px */
-  --border-radius-button-lg: 1.25rem; /* 20px */
-  --border-radius-button-round: 624.9375rem; /* 9999px */
-
-  /* Inputs */
-  --border-radius-input-default: 0.75rem; /* 12px */
-  --border-radius-input-sm: 0.25rem; /* 4px */
-  --border-radius-input-lg: 1rem; /* 16px */
-  --border-radius-input-xl: 1.5rem; /* 24px */
-  --border-radius-input-poppers: 0.75rem; /* 12px */
-
-  /* Images */
-  --border-radius-image-default: 2.5rem; /* 40px */
-  --border-radius-image-sm: 1.25rem; /* 20px */
-  --border-radius-image-lg: 3rem; /* 48px */
-}
-
-/* smb theme */
-
-[data-theme="business"] {
-  /* Border colors */
-  --color-border-brand: #007c93;
-  --color-border-critical: #d40000;
-  --color-border-focus: #007c93;
-  --color-border-focus-inverse: #231f20;
-  --color-border-focus-secondary: #231f20;
-  --color-border-success: #24a76a;
-
-  /* Icon colors */
-  --color-icon-brand: #009bb8;
-  --color-icon-brand-accent: #22a881;
-  --color-icon-default: #231f20;
-  --color-icon-secondary: #a33895;
-  --color-icon-success: #22a881;
-
-  /* Input colors */
-  --color-input-border-hover: #231f20;
-  --color-input-border-selected: #009bb8;
-  --color-input-icon-placeholder: #949494;
-  --color-input-text-placeholder: #949494;
-
-  /* Toggle colors */
-  --color-toggle-bg-surface-active: #009bb8;
-
-  /* Background fill colors */
-  --color-bg-fill-brand: #007c93;
-  --color-bg-fill-brand-accent: #22a881;
-  --color-bg-fill-brand-active: #005d6e;
-  --color-bg-fill-brand-hover: #30aec5;
-  --color-bg-fill-brand-selected: #007c93;
-  --color-bg-fill-brand-supporting: #40afc9;
-  --color-bg-fill-brand-tertiary: #a33895;
-  --color-bg-fill-inverse: #231f20;
-  --color-bg-fill-inverse-active: #231f20;
-  --color-bg-fill-inverse-hover: #4d4a4a;
-  --color-bg-fill-inverse-selected: #231f20;
-  --color-bg-fill-success: #1b8667;
-  --color-bg-fill-success-secondary: #c8e9e0;
-  --color-bg-fill-surface-brand: #bfe6ed;
-  --color-bg-fill-surface-inverse: #231f20;
-  --color-bg-fill-surface-success: #a0dac9;
-
-  /* Text colors */
-  --color-text: #231f20;
-  --color-text-brand: #009bb8;
-  --color-text-brand-accent-on-bg-fill: #22a881;
-  --color-text-brand-hover: #003e4a;
-  --color-text-brand-supporting-on-bg-fill: #40afc9;
-  --color-text-brand-tertiary-on-bg-fill: #a33895;
-  --color-text-info: #5a5a5a;
-  --color-text-link: #009bb8;
-  --color-text-link-active: #009bb8;
-  --color-text-link-hover: #003e4a;
-  --color-text-secondary: #5a5a5a;
-  --color-text-success: #1b8667;
-
-  /* Border radius tokens - Business theme */
-  --border-radius-2-5: 0px;
-  --border-radius-3-5: 3px;
-  --border-radius-lg: 2px;
-  --border-radius-xl: 2px;
-  --border-radius-2xl: 0rem;
-  --border-radius-2-5xl: 0rem;
-  --border-radius-4xl: 0rem;
-  --border-radius-5xl: 2.5rem;
-}
-
-[data-theme="business-rebrand"] {
-  /* Border colors */
-  --color-border-brand: #0393ba;
-  --color-border-focus: #0393ba;
-
-  /* Icon colors */
-  --color-icon-brand: #0393ba;
-
-  /* Input colors */
-  --color-input-border-selected: #07b2e2;
-
-  /* Toggle colors */
-  --color-toggle-bg-surface-active: #0393ba;
-
-  /* Background fill colors */
-  --color-bg-fill-brand: #0393ba;
-  --color-bg-fill-brand-hover: #07b2e2;
-  --color-bg-fill-brand-active: #027693;
-  --color-bg-fill-brand-selected: #0393ba;
-
-  --color-bg-fill-brand-supporting: #26b170;
-
-  /* Text colors */
-  --color-text-brand: #0393ba;
-  --color-text-hover: #027693;
-}
-
-/* Base styles for components */
-@layer base {
-  * {
-    box-sizing: border-box;
-  }
-
-  html {
-    font-family: var(--win-site-font);
-  }
-}
-
-/* Component-specific styles */
-@layer components {
-  /* Blinking dot animation */
-  @keyframes blink {
-    0%,
-    50% {
-      opacity: 1;
-    }
-    51%,
-    100% {
-      opacity: 0.3;
-    }
-  }
-
-  .animate-blink {
-    animation: blink 1.5s ease-in-out infinite;
-  }
-}
-
-/* Hide shape background SVGs inside content */
-
-.shape-bg-content .shape-bg svg {
-  display: none;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Material Symbols Font */
+@font-face {
+  font-family: "Material Symbols Rounded";
+  src: url("/material_symbols/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
+    format("woff2");
+  font-weight: 100 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* Custom CSS variables for fonts */
+/* default theme Residential */
+:root {
+  --win-site-font:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
+    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+
+  /* Color tokens - Border */
+  --color-border: #e6e6e6;
+  --color-border-brand: #24a76a;
+  --color-border-critical: #d40000;
+  --color-border-critical-secondary: #f0a7a7;
+  --color-border-disabled: #f2f2f4;
+  --color-border-focus: #24a76a;
+  --color-border-focus-inverse: #00002d;
+  --color-border-focus-secondary: #00002d;
+  --color-border-hover: #cecece;
+  --color-border-info: #cecece;
+  --color-border-inverse: #ffffff;
+  --color-border-secondary: #f2f2f4;
+  --color-border-secondary-on-bg-fill: #949494;
+  --color-border-success: #24a76a;
+  --color-border-tertiary: #cecece;
+  --color-border-accent: #f5ff1e;
+
+  /* Color tokens - Icon */
+  --color-icon-brand: #24a76a;
+  --color-icon-brand-accent: #f5ff1e;
+  --color-icon-critical: #d40000;
+  --color-icon: #00002d;
+  --color-icon-info: #757575;
+  --color-icon-inverse: #ffffff;
+  --color-icon-inverse-secondary: #e6e6e6;
+  --color-icon-secondary: #757575;
+  --color-icon-success: #24a76a;
+  --color-icon-disabled: #cecece;
+
+  /* Color tokens - Checkbox */
+  --color-checkbox-bg-surface-disabled: #f7f7f8;
+  --color-checkbox-bg-surface-selected-disabled: #e6e6e6;
+  --color-checkbox-icon-disabled: #ffffff;
+
+  /* Color tokens - Input */
+  --color-input-bg-surface: #ffffff;
+  --color-input-bg-surface-active: #f2f2f4;
+  --color-input-bg-surface-disabled: #f7f7f8;
+  --color-input-bg-surface-hover: #f7f7f8;
+  --color-input-border: #cecece;
+  --color-input-border-critical: #d40000;
+  --color-input-border-hover: #00002d;
+  --color-input-border-selected: #24a76a;
+  --color-input-icon-placeholder: #757575;
+  --color-input-text-placeholder: #5e5e5e;
+
+  /* Color tokens - Nav */
+  --color-nav-bg: #ffffff;
+  --color-nav-bg-surface: #fbfbfc;
+  --color-nav-bg-surface-active: #f2f2f4;
+  --color-nav-bg-surface-hover: #f7f7f8;
+  --color-nav-bg-surface-selected: #f2f2f4;
+
+  /* Color tokens - Radio */
+  --color-radio-button-bg-surface-disabled: #f7f7f8;
+  --color-radio-button-bg-surface-selected-disabled: #e6e6e6;
+  --color-radio-button-icon-disabled: #f7f7f8;
+
+  /* Color tokens - Scrim */
+  --color-scrim-bg-modal: rgba(0, 0, 0, 0.5);
+  --color-scrim-bg-video-lightbox: rgba(0, 0, 0, 0.8);
+
+  /* Color tokens - Skeleton */
+  --color-skeleton-bg-start: #cecece;
+  --color-skeleton-bg-end: #e6e6e6;
+
+  /* Color tokens - Toggle */
+  --color-toggle-bg-fill: #ffffff;
+  --color-toggle-bg-surface-active: #24a76a;
+  --color-toggle-bg-surface-inactive: #949494;
+  --color-toggle-bg-surface-disabled: #e6e6e6;
+
+  /* Color tokens - Tooltip */
+  --color-tooltip-bg: #757575;
+
+  /* Color tokens - Background */
+  --color-bg: #ffffff;
+  --color-bg-fill-brand: #24a76a;
+  --color-bg-fill-brand-accent: #f5ff1e;
+  --color-bg-fill-brand-active: #209a61;
+  --color-bg-fill-brand-disabled: #cecece;
+  --color-bg-fill-brand-hover: #45c187;
+  --color-bg-fill-brand-selected: #24a76a;
+  --color-bg-fill-brand-supporting: #07b2e2;
+  --color-bg-fill-brand-tertiary: #931d69;
+  --color-bg-fill-translucent: rgba(255, 255, 255, 0.5);
+  --color-bg-fill-critical: #d40000;
+  --color-bg-fill-critical-secondary: #fdf5f5;
+  --color-bg-fill-info: #f2f2f4;
+  --color-bg-fill-inverse: #00002d;
+  --color-bg-fill-inverse-active: #00002d;
+  --color-bg-fill-inverse-disabled: #cecece;
+  --color-bg-fill-inverse-hover: #191a54;
+  --color-bg-fill-inverse-selected: #00002d;
+  --color-bg-fill-secondary: #ffffff;
+  --color-bg-fill-secondary-active: #f2f2f4;
+  --color-bg-fill-secondary-hover: #fbfbfc;
+  --color-bg-fill-success: #24a76a;
+  --color-bg-fill-success-secondary: #f4fbf8;
+  --color-bg-fill-surface-brand: #f4fbf8;
+  --color-bg-fill-surface-inverse: #00002d;
+  --color-bg-fill-surface-success: #d3f2e3;
+  --color-bg-inverse: #00002d;
+  --color-bg-surface: #ffffff;
+  --color-bg-surface-active: #f2f2f4;
+  --color-bg-surface-brand: #f4fbf8;
+  --color-bg-surface-disabled: #f2f2f4;
+  --color-bg-surface-hover: #f7f7f8;
+  --color-bg-surface-info: #f7f7f8;
+  --color-bg-surface-inverse: #191a54;
+  --color-bg-surface-secondary: #fbfbfc;
+  --color-bg-surface-secondary-active: #e6e6e6;
+  --color-bg-surface-secondary-hover: #f2f2f4;
+  --color-bg-surface-secondary-selected: #e6e6e6;
+  --color-bg-surface-selected: #f7f7f8;
+  --color-bg-surface-success: #d3f2e3;
+  --color-bg-surface-tertiary: #f7f7f8;
+  --color-bg-surface-tertiary-active: #e6e6e6;
+  --color-bg-surface-tertiary-hover: #f2f2f4;
+  --color-bg-surface-transparent: rgba(0, 0, 0, 0);
+
+  /* Color tokens - Text */
+  --color-text: #00002d;
+  --color-text-brand: #24a76a;
+  --color-text-brand-accent-on-bg-fill: #00002d;
+  --color-text-brand-hover: #1b8352;
+  --color-text-brand-on-bg-fill: #ffffff;
+  --color-text-brand-supporting-on-bg-fill: #00002d;
+  --color-text-brand-tertiary-on-bg-fill: #ffffff;
+  --color-text-critical: #d40000;
+  --color-text-critical-on-bg-inverse: #fdf5f5;
+  --color-text-disabled: #757575;
+  --color-text-info: #757575;
+  --color-text-inverse: #ffffff;
+  --color-text-link: #00002d;
+  --color-text-link-active: #00002d;
+  --color-text-link-hover: #00002d;
+  --color-text-link-inverse: #ffffff;
+  --color-text-secondary: #464646;
+  --color-text-success: #1b8352;
+  --color-text-accent-on-bg-inverse: #f5ff1e;
+
+  /* Border radius tokens - Default (Residential) */
+  --border-radius-2-5: 10px;
+  --border-radius-3-5: 14px;
+  --border-radius-lg: 0.5rem;
+  --border-radius-xl: 0.75rem;
+  --border-radius-2xl: 1rem;
+  --border-radius-2-5xl: 1.25rem;
+  --border-radius-4xl: 2rem;
+  --border-radius-5xl: 2.5rem;
+
+  /* Border radius tokens - rebrand */
+  /* Card */
+  --border-radius-card-default: 1.25rem; /* 20px */
+  --border-radius-card-sm: 1rem; /* 16px */
+  --border-radius-card-lg: 1.5rem; /* 24px */
+
+  /* Modal */
+  --border-radius-modal-default: 1rem; /* 16px */
+  --border-radius-modal-sm: 0.5rem; /* 8px */
+  --border-radius-modal-lg: 1.5rem; /* 24px */
+
+  /* Surface */
+  --border-radius-surface-default: 1.5rem; /* 24px */
+  --border-radius-surface-xs: 0.5rem; /* 8px */
+  --border-radius-surface-sm: 1rem; /* 16px */
+  --border-radius-surface-lg: 2.5rem; /* 40px */
+  --border-radius-surface-round: 624.9375rem; /* 9999px */
+
+  /* Button */
+  --border-radius-button-default: 1rem; /* 16px */
+  --border-radius-button-sm: 0.5rem; /* 8px */
+  --border-radius-button-lg: 1.25rem; /* 20px */
+  --border-radius-button-round: 624.9375rem; /* 9999px */
+
+  /* Inputs */
+  --border-radius-input-default: 0.75rem; /* 12px */
+  --border-radius-input-sm: 0.25rem; /* 4px */
+  --border-radius-input-lg: 1rem; /* 16px */
+  --border-radius-input-xl: 1.5rem; /* 24px */
+  --border-radius-input-poppers: 0.75rem; /* 12px */
+
+  /* Images */
+  --border-radius-image-default: 2.5rem; /* 40px */
+  --border-radius-image-sm: 1.25rem; /* 20px */
+  --border-radius-image-lg: 3rem; /* 48px */
+}
+
+/* smb theme */
+
+[data-theme="business"] {
+  /* Border colors */
+  --color-border-brand: #007c93;
+  --color-border-critical: #d40000;
+  --color-border-focus: #007c93;
+  --color-border-focus-inverse: #231f20;
+  --color-border-focus-secondary: #231f20;
+  --color-border-success: #24a76a;
+
+  /* Icon colors */
+  --color-icon-brand: #009bb8;
+  --color-icon-brand-accent: #22a881;
+  --color-icon-default: #231f20;
+  --color-icon-secondary: #a33895;
+  --color-icon-success: #22a881;
+
+  /* Input colors */
+  --color-input-border-hover: #231f20;
+  --color-input-border-selected: #009bb8;
+  --color-input-icon-placeholder: #949494;
+  --color-input-text-placeholder: #949494;
+
+  /* Toggle colors */
+  --color-toggle-bg-surface-active: #009bb8;
+
+  /* Background fill colors */
+  --color-bg-fill-brand: #007c93;
+  --color-bg-fill-brand-accent: #22a881;
+  --color-bg-fill-brand-active: #005d6e;
+  --color-bg-fill-brand-hover: #30aec5;
+  --color-bg-fill-brand-selected: #007c93;
+  --color-bg-fill-brand-supporting: #40afc9;
+  --color-bg-fill-brand-tertiary: #a33895;
+  --color-bg-fill-inverse: #231f20;
+  --color-bg-fill-inverse-active: #231f20;
+  --color-bg-fill-inverse-hover: #4d4a4a;
+  --color-bg-fill-inverse-selected: #231f20;
+  --color-bg-fill-success: #1b8667;
+  --color-bg-fill-success-secondary: #c8e9e0;
+  --color-bg-fill-surface-brand: #bfe6ed;
+  --color-bg-fill-surface-inverse: #231f20;
+  --color-bg-fill-surface-success: #a0dac9;
+
+  /* Text colors */
+  --color-text: #231f20;
+  --color-text-brand: #009bb8;
+  --color-text-brand-accent-on-bg-fill: #22a881;
+  --color-text-brand-hover: #003e4a;
+  --color-text-brand-supporting-on-bg-fill: #40afc9;
+  --color-text-brand-tertiary-on-bg-fill: #a33895;
+  --color-text-info: #5a5a5a;
+  --color-text-link: #009bb8;
+  --color-text-link-active: #009bb8;
+  --color-text-link-hover: #003e4a;
+  --color-text-secondary: #5a5a5a;
+  --color-text-success: #1b8667;
+
+  /* Border radius tokens - Business theme */
+  --border-radius-2-5: 0px;
+  --border-radius-3-5: 3px;
+  --border-radius-lg: 2px;
+  --border-radius-xl: 2px;
+  --border-radius-2xl: 0rem;
+  --border-radius-2-5xl: 0rem;
+  --border-radius-4xl: 0rem;
+  --border-radius-5xl: 2.5rem;
+}
+
+[data-theme="business-rebrand"] {
+  /* Border colors */
+  --color-border-brand: #0393ba;
+  --color-border-focus: #0393ba;
+
+  /* Icon colors */
+  --color-icon-brand: #0393ba;
+
+  /* Input colors */
+  --color-input-border-selected: #07b2e2;
+
+  /* Toggle colors */
+  --color-toggle-bg-surface-active: #0393ba;
+
+  /* Background fill colors */
+  --color-bg-fill-brand: #0393ba;
+  --color-bg-fill-brand-hover: #07b2e2;
+  --color-bg-fill-brand-active: #027693;
+  --color-bg-fill-brand-selected: #0393ba;
+
+  --color-bg-fill-brand-supporting: #26b170;
+
+  /* Text colors */
+  --color-text-brand: #0393ba;
+  --color-text-hover: #027693;
+}
+
+/* Base styles for components */
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    font-family: var(--win-site-font);
+  }
+}
+
+/* Component-specific styles */
+@layer components {
+  /* Blinking dot animation */
+  @keyframes blink {
+    0%,
+    50% {
+      opacity: 1;
+    }
+    51%,
+    100% {
+      opacity: 0.3;
+    }
+  }
+
+  .animate-blink {
+    animation: blink 1.5s ease-in-out infinite;
+  }
+}
+
+/* Hide shape background SVGs inside content */
+
+.shape-bg-content .shape-bg svg {
+  display: none;
+}