/*!****************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./styles/ui-tokens.css?ngGlobalStyle ***!
  \****************************************************************************************************************************************************************************************************************************/
/* ==========================================================================
   FONT FACES
   - Self-hosted for performance and privacy
   - WOFF2 format for optimal compression
   ========================================================================== */

@font-face {
  font-family: 'Cal Sans';
  src: url('/assets/fonts/CalSans-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/GeneralSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/GeneralSans-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'General Sans';
  src: url('/assets/fonts/GeneralSans-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   DESIGN TOKENS - LIGHT THEME (DEFAULT)
   - Based on the "Warm & Approachable Premium" v3 aesthetic
   - Defines the foundation for all UI components
   ========================================================================== */

:root {
  /* ==========================================================================
     COLORS - Primary Palette
     ========================================================================== */

  /* Warm Teal (Primary Brand Color) */
  --color-primary: #2d7a8f;
  --color-primary-light: #e8f4f7;
  --color-primary-glow: rgba(45, 122, 143, 0.15);

  /* Warm Terracotta (Accent Color) */
  --color-accent: #d97642;
  --color-accent-light: #fef3ed;

  /* ==========================================================================
     COLORS - Semantic (Soft & Gentle)
     ========================================================================== */

  /* Urgent (Soft Red) - Not alarming */
  --color-urgent: #e85d5d;
  --color-urgent-light: #fef0f0;

  /* Medium (Warm Amber) */
  --color-medium: #f7a842;
  --color-medium-light: #fef8ed;

  /* Low (Soft Green) */
  --color-low: #8fc4a0;
  --color-low-light: #f2faf5;

  /* Success (Friendly Green) */
  --color-success: #00a854;
  --color-success-light: #e6f7ed;

  /* Info (Soft Blue) */
  --color-info: #1890ff;
  --color-info-light: #e6f2ff;

  /* ==========================================================================
     COLORS - Neutral Palette (Warm Grays)
     ========================================================================== */

  /* Background Colors */
  --color-bg: #fdfbf7; /* Warm off-white (primary background) */
  --color-surface: #ffffff; /* Pure white (cards, modals) */

  /* Text Colors */
  --color-text-primary: #1a1614; /* Nearly black, warm tone */
  --color-text-secondary: #6b6560; /* Medium gray, readable */
  --color-text-tertiary: #9b958f; /* Light gray, metadata */

  /* Borders & Dividers */
  --color-border: rgba(26, 22, 20, 0.06); /* Subtle border */
  --color-border-hover: rgba(26, 22, 20, 0.1); /* Hover state */

  /* ==========================================================================
     COLORS - Opportunity Score Color Coding
     ========================================================================== */

  --opportunity-high: var(--color-urgent); /* 75-100: Act within days */
  --opportunity-medium: var(--color-medium); /* 50-74: Act within week */
  --opportunity-low: var(--color-low); /* 0-49: General awareness */

  /* ==========================================================================
     TYPOGRAPHY - Font Families
     ========================================================================== */

  --font-display: 'Cal Sans', 'Rounded', sans-serif;
  --font-body: 'General Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ==========================================================================
     TYPOGRAPHY - Font Weights
     ========================================================================== */

  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;

  /* ==========================================================================
     TYPOGRAPHY - Type Scale (Desktop - 16px base)
     ========================================================================== */

  /* Display */
  --text-display-size: 2.625rem; /* 42px */
  --text-display-weight: 600;
  --text-display-line-height: 1.2; /* 50px */
  --text-display-letter-spacing: -0.02em;

  /* H1 */
  --text-h1-size: 2rem; /* 32px */
  --text-h1-weight: 600;
  --text-h1-line-height: 1.3; /* 42px */
  --text-h1-letter-spacing: -0.01em;

  /* H2 */
  --text-h2-size: 1.5rem; /* 24px */
  --text-h2-weight: 600;
  --text-h2-line-height: 1.3; /* 31px */
  --text-h2-letter-spacing: -0.005em;

  /* H3 */
  --text-h3-size: 1.25rem; /* 20px */
  --text-h3-weight: 600;
  --text-h3-line-height: 1.4; /* 28px */
  --text-h3-letter-spacing: 0;

  /* H4 */
  --text-h4-size: 1.125rem; /* 18px */
  --text-h4-weight: 600;
  --text-h4-line-height: 1.4; /* 25px */
  --text-h4-letter-spacing: 0;

  /* Body Large */
  --text-body-lg-size: 1.125rem; /* 18px */
  --text-body-lg-weight: 400;
  --text-body-lg-line-height: 1.6; /* 29px */
  --text-body-lg-letter-spacing: 0;

  /* Body (Default) */
  --text-body-size: 1rem; /* 16px */
  --text-body-weight: 400;
  --text-body-line-height: 1.6; /* 26px */
  --text-body-letter-spacing: 0;

  /* Body Small */
  --text-body-sm-size: 0.9375rem; /* 15px */
  --text-body-sm-weight: 400;
  --text-body-sm-line-height: 1.6; /* 24px */
  --text-body-sm-letter-spacing: 0;

  /* Caption */
  --text-caption-size: 0.8125rem; /* 13px */
  --text-caption-weight: 400;
  --text-caption-line-height: 1.5; /* 20px */
  --text-caption-letter-spacing: 0;

  /* Overline */
  --text-overline-size: 0.75rem; /* 12px */
  --text-overline-weight: 600;
  --text-overline-line-height: 1.5; /* 18px */
  --text-overline-letter-spacing: 0.08em;

  /* ==========================================================================
     SPACING - 8px Base Unit System
     ========================================================================== */

  --space-unit: 8px;
  --space-xs: 8px; /* 0.5rem */
  --space-sm: 12px; /* 0.75rem */
  --space-md: 16px; /* 1rem */
  --space-lg: 24px; /* 1.5rem */
  --space-xl: 32px; /* 2rem */
  --space-2xl: 48px; /* 3rem */
  --space-3xl: 64px; /* 4rem */

  /* ==========================================================================
     SHADOWS - Soft & Lifted
     ========================================================================== */

  --shadow-sm: 0 2px 8px rgba(26, 22, 20, 0.04); /* Subtle lift */
  --shadow-md: 0 4px 16px rgba(26, 22, 20, 0.08); /* Card hover */
  --shadow-lg: 0 8px 32px rgba(26, 22, 20, 0.12); /* Modal, dialog */
  --shadow-glow:
    0 0 0 1px rgba(45, 122, 143, 0.1), 0 8px 24px rgba(45, 122, 143, 0.15); /* Primary glow */

  /* ==========================================================================
     BORDER RADIUS - Friendly & Soft
     ========================================================================== */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px; /* Pills, circular avatars */

  /* ==========================================================================
     ANIMATIONS - Easing Functions
     ========================================================================== */

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy spring (primary) */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* Smooth standard */
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); /* Entering screen */

  /* ==========================================================================
     BREAKPOINTS - Mobile-First Responsive
     ========================================================================== */

  --breakpoint-sm: 640px; /* Large phones / small tablets */
  --breakpoint-md: 768px; /* Tablets */
  --breakpoint-lg: 1024px; /* Desktop */
  --breakpoint-xl: 1280px; /* Large desktop */
}

/* ==========================================================================
   DARK THEME OVERRIDES
   - Activated via data-theme="dark" attribute on <html> or <body>
   ========================================================================== */

[data-theme='dark'] {
  /* Background Colors */
  --color-bg: #1a1614; /* Deep warm charcoal */
  --color-surface: #241f1c; /* Slightly lighter charcoal */

  /* Text Colors */
  --color-text-primary: #fdfbf7; /* Warm off-white */
  --color-text-secondary: #b0aba6; /* Warm gray */
  --color-text-tertiary: #75706b; /* Darker gray */

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.12);

  /* Primary Color (slightly adjusted for dark backgrounds) */
  --color-primary: #3a96ad;
  --color-primary-light: #1a3842;
}

/* ==========================================================================
   MOBILE TYPE SCALE
   - Reduce heading sizes on smaller screens
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --text-display-size: 2rem; /* 32px */
    --text-h1-size: 1.75rem; /* 28px */
    --text-h2-size: 1.375rem; /* 22px */
    --text-h3-size: 1.125rem; /* 18px */
    /* Body sizes remain unchanged */
  }
}

/* ==========================================================================
   ACCESSIBILITY - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/*!******************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[5].rules[0].oneOf[0].use[2]!./styles.css?ngGlobalStyle ***!
  \******************************************************************************************************************************************************************************************************************/
/* Global styles for Catalyst AI */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
  background-color: #ffffff;
  color: #202124;
}


/*# sourceMappingURL=styles.css.map*/