@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;
}