/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* theme */
@layer theme {

@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gabarito&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');



/* custom props for site layout */
:root {
  /* custom sizes */
  --page-max-width: 75rem;
  --hr-width: 0.0625rem; /* approx 1px */
  --site-header-logo-width: 20rem;
  --primary-nav-search-width: 10rem;
  --primary-nav-search-button-width: 3rem;
  --gap: 1rem;
  --sidebar-width: 20rem;


  /* lightmode colours */
  --accent-light: #EBF4FF;
  --accent-medium: #98C5FF;
  --accent-color: #3171E4;
  --accent-dark: #2F4A7B;

  --text-color: #000000;
  --text-bg: #FFFFFF;
  --text-dark-color: #FFFFFF;
  --text-dark-bg: #000000;
  --text-gray: #949494;
  /* --text-gray: rgb(from var(--text-color) r g b / 0.5); */
  --text-grey: var(--text-gray);
  --text-lightgrey: #E8E8E8;



  
  /* link colours */
  --link-icon-color: var(--accent-medium);
  --link-color: var(--accent-color);
  --link-focus-color: var(--accent-color);
  --link-active-color: var(--accent-dark);

  /* button colours */
  --button-color: var(--text-bg);
  --button-focus-color: var(--text-bg);
  --button-active-color: var(accent-light);
  --button-bg: var(--accent-color);
  --button-focus-bg: var(--accent-dark);
  --button-active-bg: var(--accent-dark);

  --button-light-color: var(--accent-color);
  --button-light-focus-color: var(--text-bg);
  --button-light-active-color: var(accent-light);
  --button-light-bg: var(--text-bg);
  --button-light-focus-bg: var(--accent-color);
  --button-light-active-bg: var(--accent-color);

  --button-dark-color: var(--text-bg);
  --button-dark-focus-color: var(--text-bg);
  --button-dark-active-color: var(accent-light);
  --button-dark-bg: var(--accent-dark);
  --button-dark-focus-bg: var(--accent-color);
  --button-dark-active-bg: var(--accent-color);

}

:root {
  /* FAO report colours */
  --accent-color: #3171E4;
  --fao-gray: #949494;
  --fao-dark_gray: #707070;
  --text-bg: #ffffff;
  --fao-dark_blue: #1a2b4a;
  --fao-light_blue_1: #9ec2f5;
  --fao-light_blue_2: #bad1f6;
  --fao-light_blue_3: #d7e4fa;
  --fao-light_blue_4: #f1f6fd;
  --fao-green: #b2d235;
  --fao-pink: #e23e94;




}
}