/* === VARIABLES.CSS === */

:root {
  /* Colours */
  --colour-1: rgb(50, 140, 130); /* main colour (logo, icons, buttons, links) */
  --colour-1-transparent: 50, 140, 130;
  --colour-2: #ffffff; 
  --colour-3: #777777;
  --colour-title-1: var(--colour-1); /* page titles are the same as the primary colour*/
  --colour-title-2: ;
  --colour-title-subtitle-1: ;
  --colour-title-subtitle-2: ;
  --colour-title-subsection-1: #222222;
  --colour-title-subsection-2: ;
  --colour-heading-1: #444444;
  --colour-heading-2: ;
  --colour-heading-3: ;
  --colour-text-1: #333333;
  --colour-text-2: #444444;
  --colour-text-3: #dddddd;
  --colour-background-1: linear-gradient(to right, #777, #555 25%, #999); /* main background of body */
  --colour-background-2: var(--colour-1); /* e.g. button background */
  --colour-background-2-transparent: var(--colour-1-transparent); /* e.g. Elevator Pitch */
  --colour-background-3: rgb(240, 240, 240); /* e.g. logo background */
  --colour-background-3-transparent: 240, 240, 240;  
  --colour-background-4: rgb(255, 255, 255);  /**/
  --colour-background-4-transparent: 255, 255, 255;  /**/

  /* Typography */
  --font-base: 16px;
  --font-family: "Inter", Arial, sans-serif;
  --line-height: 1.5;

  /* Font sizes (mobile-first) */
  --fs-xs: 0.75rem; /* h6 & regular text */
  --fs-sm: 0.875rem; /* h5 */
  --fs-md: 1rem; /* h4 */
  --fs-lg: 1.25rem; /* h3 */
  --fs-xl: 1.5rem; /* h2 */
  --fs-xxl: 2rem; /* h1 */

  /* Spacing scale */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem;    /* 16px */
  --space-5: 1.5rem;  /* 24px */
  --space-6: 2rem;    /* 32px */
  --space-7: 3rem;    /* 48px */
  --space-8: 4rem;    /* 64px */
  --space-9: 5rem;    /* 80px */
  --space-fixed-1: 10px;
  --space-fixed-2: 50px;
  --space-fixed-3: 100px;
  --space-fixed-4: 200px;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-round: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 2px 6px rgba(0,0,0,0.12);
  --shadow-lg: 0 4px 12px rgba(0,0,0,0.15);
  --shadow-xl: 0 8px 16px rgba(0,0,0,0.5);

  /* Breakpoints (mobile-first) */
  --bp-xs: 399px;
  --bp-sm: 459px;
  --bp-md: 639px;
  --bp-lg: 959px;
  --bp-xl: 1279px;

  /* Z-index scale */
  --z-bottom:1;
  --z-low: 10;
  --z-mid: 100;
  --z-high: 1000;
  --z-top: 9999;

  /* Heights */
  --height-header: 70px;
  --height-elevator-pitch: 60px;
  --height-footer: 100px;

  /* Disclosure */
  --disclosure-colour-1: #222222;
  --disclosure-colour-2: #d4d4d4;
  --disclosure-colour-background-1: linear-gradient(to right, rgb(50, 140, 130), rgb(172, 236, 221));
  --disclosure-colour-background-2: rgb(172, 236, 221);
  --disclosure-colour-background-3: rgb(50, 140, 130);
  --disclosure-border: 1px solid #555555;
  --disclosure-triangle-size: 5px;
  --disclosure-triangle-colour-1: #555555;
  --disclosure-triangle-colour-2: white;
  --disclosure-triangle-margin: 10px;
  --disclosure-size: 45px;
  
/* Navbar menu */
  --navbar-dropdown-parent-margin: 1rem;
  --navbar-dropdown-parent-margin-xl: 2rem;
  --navbar-dropdown-parent-font-size: 1rem;
  --navbar-dropdown-parent-font-weight: 600;
  --navbar-dropdown-child-background-colour: #f1f1f1;
  --navbar-dropdown-child-font-size: .75rem;
  --navbar-dropdown-child-padding: 12px 16px;
  --navbar-dropdown-child-font-colour-hover: #eeeeee;

  /* Services tiles */
  --services-tiles-img-height:175px;
  --services-tiles-h3-height:30px;
  --services-tiles-h3-font-family: 'Libre Franklin';
  --services-tiles-h3-font-weight: 700;
  --services-tiles-h3-font-size: 1rem;
  --services-tiles-h3-letter-spacing: 0.03rem;

  /* Item */
  --item-border-width: 5px; /* */
  --item-border-style: solid; /* */
  --item-border-colour: var(--colour-2); /* */
  --item-background: linear-gradient(to right bottom, #B9B9B9, #D9D9D9); /* Item background */

}