/*!**********************************************************************************************************************************************************************************************************************!*\
  !*** 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]!./src/styles.css?ngGlobalStyle ***!
  \**********************************************************************************************************************************************************************************************************************/
/* ==========================================================================
   Commpare — Emerald Modern Consumer Design System
   ========================================================================== */

:root {
  /* Typography */
  --font-sans: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font-sans);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Surfaces & Canvas */
  --bg-page: #f5f8f6;
  --bg-surface: #ffffff;
  --bg-surface-elevated: #ffffff;
  --bg-surface-soft: #f0f6f2;
  --bg-surface-tint: #e7f3ec;
  --bg-emerald-glow: #ecfdf5;

  /* Typography Colors */
  --text-main: #0e1e16;
  --text-secondary: #485950;
  --text-muted: #72847b;
  --text-tertiary: #9cb0a5;
  --text-inverse: #ffffff;

  /* Brand Emerald Accents (60-30-10 Rule) */
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;

  /* Semantic Comparison Colors */
  --price-cheaper: #059669;
  --price-cheaper-bg: #ecfdf5;
  --price-cheaper-border: #a7f3d0;
  --price-expensive: #dc2626;
  --price-expensive-bg: #fef2f2;
  --promo-flag: #d97706;
  --promo-flag-bg: #fffbeb;
  --promo-flag-border: #fde68a;

  /* Borders & Dividers */
  --border-subtle: #e2ece5;
  --border-card: rgba(14, 30, 22, 0.08);
  --border-card-hover: rgba(5, 150, 105, 0.25);
  --border-focus: #10b981;

  /* Shadows (Natural & Soft Elevation) */
  --shadow-subtle: 0 1px 3px rgba(14, 30, 22, 0.04), 0 1px 2px rgba(14, 30, 22, 0.03);
  --shadow-card: 0 4px 14px -2px rgba(14, 30, 22, 0.05), 0 2px 6px -1px rgba(14, 30, 22, 0.03);
  --shadow-card-hover: 0 8px 22px -4px rgba(14, 30, 22, 0.08), 0 4px 10px -2px rgba(14, 30, 22, 0.04);
  --shadow-float: 0 14px 34px -8px rgba(14, 30, 22, 0.12);

  /* Border Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;

  /* Motion & Easing Curves */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-press: cubic-bezier(0.34, 1.56, 0.64, 1);
  --trans-fast: 0.15s var(--ease-spring);
  --trans-normal: 0.25s var(--ease-spring);
}

/* Base resets & typography */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--bg-page);
  color: var(--text-main);
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-page);
  color: var(--text-main);
  font-family: var(--font-sans);
  line-height: 1.5;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Tabular Numerals for Price Comparisons */
.tabular-nums,
[data-testid*="price"],
[data-testid*="quantity"],
[data-testid*="total"],
.product-result-price strong,
.need-line-total,
.need-unit-price,
.cheaper-badge-text strong {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* Subtle focus ring standard across the app */
:focus-visible {
  outline: 2px solid var(--emerald-500);
  outline-offset: 2px;
}


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