/* Theme file — change colours, fonts and sizes here. Every page reads from these values. */

/* To change the font: replace this Google Fonts link and the --font-heading / --font-body names below */
@import url('https://fonts.googleapis.com/css2?family=Saira:wdth,wght@50..125,100..900&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Brand colours (from the logo) */
  --color-primary: #0a2238;
  --color-accent: #d0631f;
  --color-silver: #aeaeae;

  /* Text & backgrounds */
  --color-heading: var(--color-primary);
  --color-text: #24282c;
  --color-muted: #5e6670;
  --color-bg: #ffffff;
  --color-bg-alt: #f1f3f6;
  --color-border: #dde1e5;
  --color-on-dark: #ffffff;
  --color-success: #1c8a4a;
  --color-error: #d33b3b;
  --color-whatsapp: #25d366;

  /* Shades — calculated automatically from the brand colours, no need to edit */
  --color-primary-light: color-mix(in srgb, var(--color-primary) 86%, white);
  --color-primary-lighter: color-mix(in srgb, var(--color-primary) 74%, white);
  --color-accent-dark: color-mix(in srgb, var(--color-accent) 82%, black);
  --color-accent-light: color-mix(in srgb, var(--color-accent) 72%, white);
  --color-accent-soft: color-mix(in srgb, var(--color-accent) 10%, white);

  /* Fonts */
  --font-heading: 'Saira', 'Segoe UI', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  --heading-weight: 650;
  --heading-stretch: 112%;
  --font-size-body: 16px;

  /* Font sizes */
  --fs-h1: clamp(2.2rem, 4vw, 3.4rem);
  --fs-h2: clamp(1.75rem, 2.8vw, 2.45rem);
  --fs-h3: 1.22rem;
  --fs-small: 0.875rem;

  /* Layout */
  --container: 1240px;
  --radius: 8px;
  --radius-lg: 16px;
  --header-height: 78px;
  --section-space: 96px;
  --shadow: 0 20px 44px -20px color-mix(in srgb, var(--color-primary) 32%, transparent);
  --shadow-sm: 0 8px 20px -12px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

@media (max-width: 991px) {
  :root {
    --header-height: 68px;
    --section-space: 72px;
  }
}

@media (max-width: 767px) {
  :root {
    --section-space: 60px;
    --font-size-body: 15.5px;
  }
}