:root{
  /* Color tokens */
  --brand-gradient-start: #667eea;
  --brand-gradient-end: #764ba2;
  --brand-gradient: linear-gradient(135deg,var(--brand-gradient-start),var(--brand-gradient-end));
  --brand-primary: #667eea;
  --brand-primary-rgb: 102,126,234;
  --brand-primary-2: #764ba2;
  --brand-primary-2-rgb: 118,75,162;
  --brand-primary-2: #764ba2;
  --text-heading: #2d3748;
  --text-muted: #718096;
  --bg-light: #f8f9fa;

  /* Radii */
  --radius-lg: 40px;
  --radius-md: 20px;
  --radius-sm: 15px;

  /* Shadows */
  --shadow-sm: 0 4px 15px rgba(0,0,0,0.08);
  --shadow-md: 0 10px 40px rgba(102,126,234,0.25);
  --shadow-btn: 0 4px 15px rgba(102,126,234,0.4);

  /* Motion */
  --motion-fast: 0.18s;
  --motion: 0.3s;
  --motion-slow: 0.45s;

  /* Typography scale */
  --h1-size: 3rem;
  --h2-size: 2rem;
  --lead-size: 1.3rem;

  /* Misc */
  --card-border: 2px solid #e2e8f0;
}

/* Map brand tokens to Bootstrap expected tokens for components that rely on them */
:root {
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-secondary: var(--brand-primary-2);
  --bs-secondary-rgb: var(--brand-primary-2-rgb);
  --bs-body-bg: var(--bg-light);
  --bs-link-color: var(--brand-primary);
  --bs-link-hover-color: color-mix(in srgb, var(--brand-primary) 70%, #000 30%);
  /* form/card backgrounds */
  --bs-form-control-bg: #ffffff;
  --bs-card-bg: #ffffff;
}

/* Global utilities and sensible defaults */
body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important }
}

/* Focus visible for keyboard users */
:focus{ outline: none; }
:focus-visible{ outline: 3px solid rgba(102,126,234,0.28); outline-offset: 3px; border-radius: 6px; }

/* Gradient text helper */
.text-gradient {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Helper for rounded cards */
.card-rounded-lg{ border-radius: var(--radius-lg); }
.card-rounded-md{ border-radius: var(--radius-md); }
.card-rounded-sm{ border-radius: var(--radius-sm); }

/* Centralized brand usage: apply Planos gradient to navbar, footer and card headers */
.navbar.bg-primary, footer.bg-primary {
  /* Use the same linear-gradient as the pricing hero/banner */
  background: var(--brand-gradient) !important;
  background-image: var(--brand-gradient) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
  border: none;
}
.navbar.bg-primary .nav-link { color: rgba(255,255,255,.95); }
.navbar.bg-primary .nav-link:hover, .navbar.bg-primary .nav-link:focus { color: #fff; }

/* Ensure the navbar uses solid text color on small screens and contrasts against gradient */
.navbar.bg-primary .navbar-brand .text-gradient {
  -webkit-background-clip: text; background-clip: text; /* standard + webkit */
  -webkit-text-fill-color: transparent; color: transparent;
}
.navbar.bg-primary .navbar-brand img { box-shadow: 0 2px 8px rgba(0,0,0,0.12); }

/* Card headers use the gradient as an accent */
.card-header, .pricing-card .card-header { background: var(--brand-gradient); color: #fff; border: none; }

/* Pricing-card hover/focus states emphasize the brand */
.pricing-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); border-color: var(--brand-primary); }
.pricing-card:focus-within, .pricing-card:focus { box-shadow: var(--shadow-md); outline: none; border-color: var(--brand-primary); }

/* Ensure primary buttons and badges use the brand token */
.badge.bg-primary { background: var(--brand-primary) !important; }
.btn.btn-primary { --bs-btn-bg: var(--brand-primary); --bs-btn-border-color: var(--brand-primary); box-shadow: var(--shadow-btn); }