:root {
  /* Brand colours */
  --color-primary:         #1A3A5C;
  --color-primary-dark:    #0a1c2e;
  --color-secondary:       #E26409;
  --color-secondary-light: #F5813A;
  --color-tertiary:        #2E6DA4;

  /* Neutrals */
  --color-white:           #FFFFFF;
  --color-off-white:       #F4F8FC;
  --color-light-blue:      #D5E8F4;
  --color-sky:             #BBE4FF;
  --color-text:            #1A2B3C;
  --color-muted:           #5A7A96;
  --color-border:          #C8DFF0;

  /* Typography */
  --font-display: 'Inter', Arial, sans-serif;
  --font-body:    'Inter', Arial, sans-serif;
  --font-size-base: 16px;

  /* Layout */
  --container-width:   1280px;
  --container-padding: 3rem;

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7.5rem;

  /* Navigation */
  --nav-height:        66px;
  --nav-height-mobile: 60px;

  /* Transitions */
  --ease: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --shadow: 0 4px 24px rgba(0,0,0,0.12);

  /* Radius */
  --radius:    8px;
  --radius-md: 16px;
}

@media (max-width: 600px) {
  :root {
    --container-padding: 1.25rem;
  }
}

/* Platform brand colours — used by CSS classes instead of inline styles */
:root {
  --color-facebook:  #1877F2;
  --color-instagram: #E1306C;
  --color-google:    #EA4335;
  --color-linkedin:  #0A66C2;
  --color-tiktok:    #69C9D0;
}

.icon-meta,
.icon-facebook   { color: var(--color-facebook); }
.icon-instagram  { color: var(--color-instagram); }
.icon-google     { color: var(--color-google); }
.icon-linkedin   { color: var(--color-linkedin); }
.icon-tiktok     { color: var(--color-tiktok); }

/* Single-product page platform icon colouring */
.sp-icon-facebook,
.sp-icon-meta      { color: var(--color-facebook); }
.sp-icon-instagram { color: var(--color-instagram); }
.sp-icon-google    { color: var(--color-google); }
.sp-icon-linkedin  { color: var(--color-linkedin); }
.sp-icon-tiktok    { color: var(--color-tiktok); }

/* Package advisor — section label on dark background */
.advisor-section-label { color: rgba(255,255,255,0.6); }