:root {
  /* Colours */
  --color-primary: #f198ee;
  --color-primary-light: #ff91ce;
  --color-primary-dark: #e64392;
  --gradient-dark-to-light: linear-gradient(20deg, var(--color-gray-700) 0%, var(--color-gray-800) 100%);

  /* Grey scale */
  --color-white: #ffffff;
  --color-gray-100: #e8e8e8;
  --color-gray-200: #f0f0f0;
  --color-gray-300: #d7d8d6;
  --color-gray-400: #afb6bd;
  --color-gray-500: #36383a;
  --color-gray-600: #0e3344;
  --color-gray-700: #003138;
  --color-gray-800: #111111;
  --color-gray-900: #0a1e21;
  --color-black: #000000;

  /* Pastel colours */
  --color-pastel-pink: #f0c0c0;       /* Light pink */
  --color-pastel-blue: #c0e0f0;       /* Light blue */
  --color-pastel-green: #c0f0c0;      /* Light green */
  --color-pastel-yellow: #f0e0c0;     /* Light yellow */
  --color-pastel-purple: #dda0dd;     /* Light purple for animation */

  /* Message colors */
  --color-status-text: #325e1c;
  --color-status-border: #c9e1bd;
  --color-status-background: #f3faef;
  --color-status-shadow: #77b259;
  --color-warning-text: #734c00;
  --color-warning-border: #f4daa6;
  --color-warning-background: #fdf8ed;
  --color-warning-shadow: #e09600;
  --color-error-text: #a51b00;
  --color-error-border: #f9c9bf;
  --color-error-background: #fcf4f2;
  --color-error-shadow: #e62600;

  /* Animation glow colors (for Call to action) */
  --rgb-glow-pink: 255, 105, 180;
  --rgb-glow-blue: 173, 216, 230;
  --rgb-glow-yellow: 255, 255, 102;
  --rgb-glow-green: 144, 238, 144;
  --rgb-glow-purple: 221, 160, 221;

  /* Fonts */
  --font-family-primary: 'Montserrat Variable', sans-serif;
  --font-family-secondary: 'Abril Fatface Variable', sans-serif;

  /* Font weight */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Font sizes */
  /* Static font sizes (using a scaled approach) */
  --font-size-base: 1rem;
  --font-size-xs: calc(var(--font-size-base) * 0.8);
  --font-size-sm: calc(var(--font-size-base) * 0.875);
  --font-size-md: calc(var(--font-size-base) * 1);
  --font-size-lg: calc(var(--font-size-base) * 1.125);
  --font-size-xl: calc(var(--font-size-base) * 1.3125);
  --font-size-2xl: calc(var(--font-size-base) * 1.75);
  --font-size-3xl: calc(var(--font-size-base) * 2.1875);
  --font-size-4xl: calc(var(--font-size-base) * 2.625);
  --font-size-5xl: calc(var(--font-size-base) * 3.5);
  --font-size-6xl: calc(var(--font-size-base) * 4.375);
  --font-size-7xl: calc(var(--font-size-base) * 6.5625);

  /* Responsive font sizes */
  --font-size-body-responsive: clamp(var(--font-size-md), 2vw, var(--font-size-lg));
  --font-size-h1-homepage-responsive: clamp(var(--font-size-4xl), 9vw, var(--font-size-5xl));
  --font-size-h1-responsive: clamp(var(--font-size-4xl), 9vw, var(--font-size-5xl));
  --font-size-stats-responsive: clamp(var(--font-size-3xl), 9vw, var(--font-size-7xl));
  --font-size-h2-responsive: clamp(var(--font-size-3xl), 6vw, var(--font-size-4xl));
  --font-size-teaser-responsive: clamp(var(--font-size-md), 1vw, var(--font-size-xl));

  /* Applying font sizes (semantic mapping) */
  --font-size-body: var(--font-size-body-responsive);
  --font-size-h1-homepage: var(--font-size-h1-homepage-responsive);
  --font-size-stats: var(--font-size-stats-responsive);
  --font-size-h1: var(--font-size-h1-responsive);
  --font-size-h2: var(--font-size-h2-responsive);
  --font-size-teaser: var(--font-size-teaser-responsive);
  --font-size-x-large: var(--font-size-2xl);

  /* Heading font-weight */
  --heading-font-weight: var(--font-weight-black);
  --font-weight-h1-homepage: var(--heading-font-weight);
  --font-weight-h1: var(--heading-font-weight);
  --font-weight-h2: var(--heading-font-weight);
  --font-weight-h3: var(--font-weight-bold);
  --font-weight-h4: var(--font-weight-bold);
  --font-weight-h5: var(--font-weight-bold);
  --font-weight-large-text: var(--heading-font-weight);

  /* Line heights */
  --line-height-body: 1.75;
  --line-height-tight: 1;
  --line-height-heading: 1.25;
  --line-height-medium: 1.3;
  --line-height-loose: 1.6;

  /* Heading line-height */
  --line-height-h1-homepage: var(--line-height-tight);
  --line-height-h1: var(--line-height-tight);
  --line-height-h2: var(--line-height-tight);
  --line-height-h3: var(--line-height-heading);
  --line-height-h4: var(--line-height-heading);
  --line-height-h5: var(--line-height-heading);
  --line-height-large-text: var(--line-height-body);

  /* Spacing items (using a scaled approach based on 10px as a base) */
  --spacing-base: 1rem;
  --spacing-1xs: 5px;
  --spacing-2xs: 10px;
  --spacing-xs: calc(var(--spacing-base) * 0.625);
  --spacing-md: var(--spacing-base);
  --spacing-lg: calc(var(--spacing-base) * 1.25);
  --spacing-xl: calc(var(--spacing-base) * 1.875);
  --spacing-2xl: calc(var(--spacing-base) * 2.5);
  --spacing-3xl: calc(var(--spacing-base) * 3.125);
  --spacing-4xl: calc(var(--spacing-base) * 3.75);
  --spacing-5xl: calc(var(--spacing-base) * 6.25);

/* Widths (breakpoints) */
/* These variables define the maximum width for various screen sizes,
   acting as breakpoints for responsive layouts. */
  --width-sm: 625px;        /* Small screens (e.g., larger mobiles, tablets in portrait) */
  --width-md: 768px;        /* Medium screens (e.g., tablets in landscape, small laptops) */
  --width-lg: 960px;        /* Large screens (e.g., standard desktops) */
  --width-xl: 1280px;       /* Extra Large screens (e.g., larger desktops) */
  --width-xxl: 1440px;      /* Double Extra Large screens */
  --width-xxxl: 1920px;     /* Triple Extra Large screens (e.g., Full HD displays) */
  --width-xxxxl: 2160px;    /* Quadruple Extra Large screens (e.g., 4K displays) */

  /* Utility widths (Specific use cases) */
  /* These provide more semantic names for common width scenarios. */
  --width-full: 100%;                       /* Represents a full 100% width, useful for fluid elements */
  --width-content-max: var(--width-xl);     /* Defines the maximum width for main content areas,
                                               often aligning with a specific breakpoint. */

  /* Borders */
  --border-width-base: var(--spacing-2xs);
  --border-width-lg: var(--spacing-xs);
  --border-radius-base: var(--spacing-1xs);
  --border-radius-lg: var(--spacing-2xs);
  --border-color-default: var(--color-gray-300);
  --border-color-dark: var(--color-gray-500);
  --border-color-light: var(--color-gray-100);
  --border-style: solid;
  --border-default: var(--border-width-base) var(--border-style) var(--border-color-default);
  --border-lg: var(--border-width-lg) var(--border-style) var(--border-color-default);
  --border-dark: var(--border-width-base) var(--border-style) var(--border-color-dark);
  --border-light: var(--border-width-base) var(--border-style) var(--border-color-light);

  /* Animation */
  --transition-time: 0.2s;

  /* Shadow */
  --shadow-sm: 0 1px 20px 0 hsla(0, 0%, 0%, 0.25);
  --shadow-md: 0 2px 8px 0 hsla(0, 0%, 0%, 0.18);

  /* Blur */
  --blur-sm: 2px;

  /* Overlays */
  --overlay-dark-20: hsla(0, 0%, 0%, 0.20);
  --overlay-gradient-bottom: linear-gradient(180deg, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.33) 100%);
  --overlay-stacked: var(--overlay-gradient-bottom), var(--overlay-dark-20);
  --overlay-gradient-bottom-pink: linear-gradient(180deg, hsla(0, 0%, 100%, 0) 0%, hsla(331, 86%, 59%, 0.502) 100%);

  /* Grids */
  --grid-columns: 12;
  --grid-gap-base: var(--spacing-xl);
  --grid-gap-none: 0;
  --grid-gap-sm: var(--spacing-xs);
  --grid-gap-lg: var(--spacing-lg);

  /* Text */
  --font-size: var(--font-size-body);

  /* Navigation */
  --underline-offset: 7px;

  /* Hero */
  --hero-border-radius: var(--border-radius-base);
  --hero-width-sm: 53rem;
  --hero-width-lg: var(--width-lg);
  --hero-width-xl: var(--width-xl);

  /* Hero – homepage */
  --homepage-overlay: linear-gradient(-90deg, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0.20) 100%), hsla(0, 0%, 0%, 0.06);

  /* Call to action button */
  --button-primary-background: var(--color-primary);
  --button-primary-color: var(--color-black);
  --button-primary-background-hover: var(--color-primary-dark);
  --button-primary-color-hover: var(--color-black);
  --button-secondary-background: var(--color-primary-dark);
  --button-secondary-color: var(--color-white);
  --button-secondary-background-hover: var(--color-white);
  --button-secondary-color-hover: var(--color-primary-dark);
  --button-border-radius: var(--border-radius-base);

  /* Call to action block */
  --call-to-action-background-gradient: var(--gradient-dark-to-light);
  --call-to-action-background: var(--call-to-action-background-gradient);
  --call-to-action-hover-background: var(--button-primary-background-hover);
  --call-to-action-link-background: var(--button-primary-background);

  /* Stats */
  --stats-footer-background: var(--color-white);
  --stats-footer-color: var(--color-black);
  --stats-overlay: var(--overlay-stacked);
  --stats-content-color: var(--color-white);

  /* Quote */
  --quote-overlay: var(--overlay-stacked);
  --quote-icon-color: var(--color-primary);

  /* Accordion */
  --accordion-header-background: var(--color-gray-900);
  --accordion-header-color: var(--color-white);
  --accordion-header-background-hover: var(--color-primary);
  --accordion-header-color-hover: var(--color-white);
  --accordion-content-background: var(--color-gray-900);
  --accordion-content-color: var(--color-white);
  --accordion-link-color: var(--color-primary);
  --accordion-call-to-action-border-color: var(--color-gray-900);
  --accordion-call-to-action-color: var(--color-gray-800);
  --accordion-call-to-action-background-hover: var(--color-primary);
  --accordion-call-to-action-color-hover: var(--color-white);

  /* Search */
  --pagination-item-background-hover: var(--color-primary);
  --pagination-item-color-hover: var(--color-white);
  --pagination-item-border-color-hover: var(--color-primary);
  --search-highlight-color: var(--color-black);
  --search-highlight-background: var(--color-primary);

  /* Forms */
  --form-input-color: var(--color-black);
  --form-input-background: var(--color-white);
  --form-input-border-color: var(--color-black);

  /* Tags */
  --tag-color-hover: var(--color-black);
  --tag-background: transparent;
  --tag-background-hover: var(--color-primary);
  --tag-border-color-hover: var(--color-primary);
  --tag-border-color: var(--color-white);

  /* Signup block */
  --signup-block-background: var(--color-gray-700);
  --signup-block-color: var(--color-white);
  --signup-button-color: var(--color-white);
  --signup-button-color-hover: var(--color-black);
  --signup-border-color: var(--color-white);
  --signup-border-radius: var(--border-radius-base);

  /* Table variables */
  --table-border-default: 1px solid var(--color-gray-300);
  --table-padding-default: var(--spacing-sm);
  --table-bg-color-default: var(--color-gray-100);
}

/* Default theme (dark mode) */
body {
  --theme-dark-body-background: var(--color-gray-700);
  --theme-dark-body-color: var(--color-white);
  --theme-dark-logo-color: var(--color-white);
  --color-link: var(--color-white);
  --hero-caption-color: var(--color-white);
  --theme-dark-pagination-item-color: var(--color-black);
  --theme-dark-pagination-item-background: var(--color-white);
  --theme-dark-pagination-item-border-color: var(--color-white);
  --theme-dark-tag-color: var(--color-white);
  --theme-dark-tag-border-color: var(--color-white);
  --theme-dark-related-content-background: var(--color-gray-700);
}