/*
BestCarpetKey — Design Tokens
Paste this into: Elementor > Site Settings > Custom CSS (Elementor Pro),
or into theme/style.css if using the custom child theme.
Keep this as the single source of truth — do not redefine these values inline elsewhere.
*/

:root {
  /* Color */
  --bck-teal: #3888A7;
  --bck-teal-deep: #24677F;
  --bck-lavender: #AC86AF;
  --bck-lavender-soft: #D5C2D7;
  --bck-lavender-muted: #C0A4C3; /* exact midpoint blend of --bck-lavender and --bck-lavender-soft — a sophisticated, dustier lilac for branded CTA sections, not a new hue */
  --bck-white: #FFFFFF;
  --bck-off-white: #FAFAF9;
  --bck-text: #17242A;
  --bck-text-muted: #617078;
  --bck-border: #E4E8EA;
  --bck-error: #B3423E;

  /* Typography */
  --bck-font: 'Manrope', sans-serif;
  --bck-font-display: 'DM Serif Display', Georgia, serif;
  --fs-display: 56px;
  --fs-h1: 44px;
  --fs-h2: 34px;
  --fs-h3: 24px;
  --fs-h4: 18px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-eyebrow: 13px;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(23, 36, 42, 0.06);
  --shadow-md: 0 8px 24px rgba(36, 103, 127, 0.12);
  --shadow-lg: 0 20px 48px rgba(36, 103, 127, 0.16);

  /* Layout */
  --container-max: 1280px;
  --container-max-wide: 1440px;
}

/* Mobile type scale (<=767px). clamp() keeps 320px and 430px phones both proportionate. */
@media (max-width: 767px) {
  :root {
    --fs-display: clamp(32px, 9.2vw, 40px);
    --fs-h1: clamp(30px, 8.4vw, 36px);
    --fs-h2: clamp(28px, 7.6vw, 34px);
    --fs-h3: clamp(21px, 5.8vw, 24px);
    --fs-h4: 19px;
    --fs-body: 16px;
    --fs-small: 14px;
    --fs-eyebrow: 12.5px;
  }
}

/* Base */
body {
  font-family: var(--bck-font);
  color: var(--bck-text);
  background: var(--bck-off-white);
}

.bck-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bck-lavender);
}

/* Buttons */
.bck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: var(--fs-body);
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
  cursor: pointer;
}

.bck-btn-primary {
  background: var(--bck-teal);
  color: var(--bck-white);
  border: none;
}
.bck-btn-primary:hover {
  background: var(--bck-teal-deep);
  color: var(--bck-white);
}

.bck-btn-secondary {
  background: transparent;
  color: var(--bck-teal);
  border: 1.5px solid var(--bck-teal);
}
.bck-btn-secondary:hover {
  background: rgba(56, 136, 167, 0.08);
}

.bck-btn-accent {
  background: var(--bck-lavender);
  color: var(--bck-white);
  border: none;
}
.bck-btn-accent:hover {
  background: #96709A;
}

/* Cards */
.bck-card {
  background: var(--bck-white);
  border: 1px solid var(--bck-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 200ms ease-out, transform 200ms ease-out;
}
.bck-card:hover {
  box-shadow: var(--shadow-md);
}
.bck-card img {
  transition: transform 350ms ease-out;
}
.bck-card:hover img {
  transform: scale(1.04);
}

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